pointer-events: none; //如同disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，这个链接，你是点不了的，并且 hover 也没有效果。
（值得一提的是，仅仅是鼠标事件失效，用 tab 键还是可以选中该链接的然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了）
案例：
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>跟随鼠标移动（大图展示）</title><style type="text/css">html, body {overflow: hidden;}body, div, ul, li {margin: 0;padding: 0;}#box ul {width: 768px;height: 172px;list-style-type: none;margin: 10px auto;}#box li {float: left;width: 170px;height: 170px;cursor: pointer;display: inline;border: 1px solid #ddd;margin: 0 10px;}#box li.active {border: 1px solid #a10000;}#box li img {width: 170px;height: 170px;vertical-align: top;}#big {position: absolute;width: 400px;height: 400px;border: 2px solid #ddd;display: none;pointer-events: none;}#big div {position: absolute;top: 0;left: 0;width: 400px;height: 400px;opacity: 0.5;filter: alpha(opacity=50);/*background: #fff url(img/loading.gif) 50% 50% no-repeat;*/}</style><script src="jquery-1.12.4.js"></script><script>$(function(){$('#box li').on('mouseenter',function () {// console.log($(this).find('img').attr('src'));$('#box li').on('mousemove',function (e) {// console.log(e.clientX,e.clientY);var w=$(window).width();var bigW=$('#big').width();if(w-e.clientX>bigW){$('#big').css({'left':e.clientX,'top':e.clientY})}else {$('#big').css({'left':e.clientX-bigW,'top':e.clientY})}})$('#big').css('display','block');$('#big div').empty().append('<img src="'+$(this).find('img').attr('src')+'" width="100%" height="100%">')})$('#box li').on('mouseleave',function () {$('#big').css('display','none');})
})</script>
</head>
<body>
<div id="box"><ul><li><img src="http://www.fgm.cc/learn/lesson5/img/shirt_1.jpg"/></li><li><img src="http://www.fgm.cc/learn/lesson5/img/shirt_2.jpg"/></li><li><img src="http://www.fgm.cc/learn/lesson5/img/shirt_3.jpg"/></li><li><img src="http://www.fgm.cc/learn/lesson5/img/shirt_4.jpg"/></li></ul>
</div>
<div id="big"><div><img src="http://www.fgm.cc/learn/lesson5/img/shirt_1.jpg" width="100%" height="100%"></div>
</div>
</body>
</html>
该案例中鼠标移动到box中li的图片时，对应的id为big的盒子显示并且跟着鼠标移动，在id为 big的盒子未添加pointer-events: none;big的盒子会不停闪动。出现原因当鼠标移动到box上时，id为 big的盒子出现在li的盒子上鼠标之下，使得鼠标针对li的移动事件受到影响。解决方式就是为id为big的盒子添加样式pointer-events: none;
出现场景2：在放大镜案例中，为box添加鼠标移动事件，给遮罩层设置left和top 使鼠标永远在遮罩层中间，而在获取鼠标的移动时的坐标时（使用jquery中offsetX，offsetY系列），鼠标位置不准确
解决方式：为遮罩层添加样式point-event：none