美文网首页
mousedown/mouseup/click执行顺序

mousedown/mouseup/click执行顺序

作者: pythonsys | 来源:发表于2018-03-18 00:42 被阅读0次

    一般情况下执行顺序是从左到右。有时需要解决mousedown和click冲突的事件。下面是一个网友的解决办法:

    之前做项目遇到同一个dom上要同时绑定单击和mousedown事件, 然后就发现冲突了,总是先执行mousedown事件,click时间不会被执行。因为想要click的时候必然先mousedown,所以……
    后来通过setTimeout解决了此冲突,简单总结demo如下:

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <style type="text/css">
    div{
    width:100px;
    height:100px;
    background:green;
    }
    </style>
    <body>
    <div class="demo"></div>
    </body>
    </html>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var down=null;
    var mouse=false;
    $('.demo').mousedown(function(){
    clearTimeout(down);
    down=setTimeout(function(){
    mouse=true;
    console.log('鼠标按下了');
    },200);
    });
    $('.demo').click(function(){
    clearTimeout(down);//要清除down事件,否则在执行了click事件之后,会接着执行mousedown事件
    if(!mouse){
    console.log('被点击了');
    }else{
    mouse=false;
    }
    });
    });
    </script>

    以下是我在Chrome里查看执行顺序时的情况。点击一下后的执行顺序。


    image.png

    相关文章

      网友评论

          本文标题:mousedown/mouseup/click执行顺序

          本文链接:https://www.haomeiwen.com/subject/rebsqftx.html