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

一般可以把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); // 清除延迟时间
        }
    });

你可能感兴趣的:(转载-解决OnMouseDown OnMouseUp与OnClick事件的冲突问题)