转载-解决OnMouseDown OnMouseUp与OnClick事件的冲突问题

2019独角兽企业重金招聘Python工程师标准>>>

一般可以把OnClick认为是OnMouseDown和OnMouseUp的集合体。OnClick一般用于处理瞬间的点击效果，而OnMouseDown和OnMouseUp主要用于处理一些之间有时间间隔的效果，比如说鼠标拖拽停放的效果。

冲突场景：

      如果一个对象身上既有OnClick，又需要有OnMouseDown和OnMouseUp。如果点击这个对象，这三个对象同时触发。如果我们仅仅想要单机效果，但不巧的是，他把OnMouseDown和OnMouseUp也给触发了，而我根本就不想触发OnMouseDown和OnMouseUp。

解决方案：

       用setTimeout异步的调用OnMouseDown中的代码，间隔时间为200ms。

如果Down和Up之间时间

                1)  >200ms,调用OnMouseDown和OnMouseUp

                2)  <=200ms,调用Click事件

代码：（以Jquery代码为例）

var mouseDownAndUpTimer = null;
    var onMouseDownFlag = false;

    $(element).click(function(){
        // click code in here
    });

    $(element).MouseDown(function(){
        onMouseDownFlag = false;
        mouseDownAndUpTimer = setTimeout(function(){
            // OnMouseDown Code in here
            onMouseDownFlag = true;
        },200);
    }).MouseUp(function(){
        if(onMouseDownFlag){
            // OnMouseUp Code in here
        }else{
            clearTimeout(mouseDownAndUpTimer); // 清除延迟时间
        }
    });

转载于:https://my.oschina.net/ray1421/blog/649493