版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013299635/article/details/79851945
主要看id为c4，
核心思路：比如当前你要点击一个a标签跳转到别的地方，鼠标按下去后（还没松开），突然不想点了，然后把鼠标移到别处去，然后，a标签是不会被触发的，这里用的就是这个思路。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
width:1000px; height:800px;color:#000;
}
#c1{ width:600px; height:600px; background:pink;}
#c2{ position:relative; width:400px; height:400px; background:red; overflow:hidden;}
#c3{ width:200px; height:200px; background:blue;}
#c4{
display:none;
position:absolute;top:0;left:0;z-index: 999;
width:600px; height:600px;
opacity:0.2;background:blue;border:1px solid yellow;
}
</style>
</head>
<body>
<div id="c4">4</div>
<div id="c1">1
<div id="c2">2
<div id="c3">3</div>
</div>
</div>
<script type="text/javascript">
var oBox1 = document.getElementById('c1');
var oBox2 = document.getElementById('c2');
var oBox3 = document.getElementById('c3');
var oBox4 = document.getElementById('c4');
var flag = true;
oBox1.addEventListener('click',function(e){
console.log(1);
},flag);
oBox2.addEventListener('click',function(e){
console.log(2);
},flag);
oBox3.addEventListener('mousedown',function(e){
e.stopPropagation();
console.log('3-mosuedown');
oBox4.style.display = 'block';
},flag);
oBox4.addEventListener('mouseup',function(e){
e.stopPropagation();
console.log('oBox4');
oBox4.style.display = 'none';
},flag);
</script>
</body>
</html>