元素同时绑定单击、双击事件,并在选择文本时不触发事件

首先如果同时绑定单击和双击事件,默认会触发单击事件,双击无效,解决办法是延迟单击事件。但有时需要在元素上选择文本,单击时又会触发单击事件,而有时单击事件会弹出对话框什么的,希望选择时不要触发单击、双击事件,代码如下:

var clickTimer = null;
$('#something').bind('mousedown', function (evt) {
    //记录单击时的鼠标位置
    $(this).attr('x', evt.pageX).attr('y', evt.pageY);
}).bind('mouseup', function (evt) {
    //此处可加入单击鼠标键的判断,evt.which,1是左键、2是中键,3是右键,还可以判断是否按下功能键……

    //如果鼠标移动距离小于5则按单击处理
    if (Math.abs(evt.pageX - ($(this).attr('x') || 0)) <= 5 && Math.abs(evt.pageY - ($(this).attr('y') || 0) <= 5)) {
        clearTimeout(clickTimer);
        //延时调用单击事件
        clickTimer = setTimeout(function () {
            //单击事件……
        }, 300);
    } else {
        //选择文本……
    }
}).bind('dblclick', function (evt) {
    //双击事件
});

 

你可能感兴趣的:(Javascript资料,JQuery,WEB)