js mouseup和mousedown 阻止冒泡事件-解决方法

最新推荐文章于 2024-07-25 20:08:25 发布

kaiking_g

最新推荐文章于 2024-07-25 20:08:25 发布

阅读量1.4w

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u013299635/article/details/79851945

版权

javascript 专栏收录该内容

88 篇文章 2 订阅

订阅专栏

主要看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>