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

时间：2025-02-07 18:55:42

主要看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 >4</div>
        <div >1
            <div >2
                <div >3</div>
            </div>
        </div>
        <script type="text/javascript">
            var oBox1 = ('c1');
            var oBox2 = ('c2');
            var oBox3 = ('c3');
            var oBox4 = ('c4');

            var flag = true;
            ('click',function(e){
                (1);
            },flag);
            ('click',function(e){
                (2);
            },flag);
            ('mousedown',function(e){
                ();
                ('3-mosuedown');
                 = 'block';
            },flag);

            
            ('mouseup',function(e){
                ();
                ('oBox4');
                 = 'none';
                
            },flag);

        </script>
    </body>
</html>


相关文章