javascript - 区分 click 与 mousedown/mouseup

Question

我已经阅读了与这种情况有关的几个关于 stackoverflow 的答案，但没有一个解决方案有效。

我正在尝试根据用户是单击一个元素还是使用 jQuery 将鼠标按住该元素来做不同的事情。

有可能做到这一点吗？

score 32 · Accepted Answer

onMouseDown 将在按下左或右（或中间）时触发。同样，onMouseUp 将在任何按钮被释放时触发。onMouseDown 即使在鼠标单击对象然后移开它时也会触发，而 onMouseUp 将在您单击并按住其他位置的按钮然后在对象上方释放时触发。

仅当在同一对象上按下并释放鼠标左键时才会触发 onClick。如果您关心顺序，如果同一个对象设置了所有 3 个事件，它是 onMouseDown、onMouseUp 和 onClick。每个偶数应该只触发一次。

细节：

score 22 · Accepted Answer

这是一种方法

将变量设置为 true
创建一个函数，在调用时将其设置为 false
有一个计时器 ( setTimeout()) 在 mousedown() 上开始倒计时
在 mouseup 上，清除超时，并检查变量是 true 还是 false
如果它是假的，调用你想在点击时发生的函数
在任何情况下，将变量设置回 true

这将做你想要的。这是一个 jsfiddle，展示了它是如何工作的：http: //jsfiddle.net/zRr4s/3/

score 11 · Accepted Answer

这是一个同时支持点击和保持的解决方案：

// Timeout, started on mousedown, triggers the beginning of a hold
var holdStarter = null;
// Milliseconds to wait before recognizing a hold
var holdDelay = 500;
// Indicates the user is currently holding the mouse down
var holdActive = false;
// MouseDown
function onMouseDown(){
    // Do not take any immediate action - just set the holdStarter
    //  to wait for the predetermined delay, and then begin a hold
    holdStarter = setTimeout(function() {
        holdStarter = null;
        holdActive = true;
        // begin hold-only operation here, if desired
    }, holdDelay);
}
// MouseUp
function onMouseUp(){
    // If the mouse is released immediately (i.e., a click), before the
    //  holdStarter runs, then cancel the holdStarter and do the click
    if (holdStarter) {
        clearTimeout(holdStarter);
        // run click-only operation here
    }
    // Otherwise, if the mouse was being held, end the hold
    else if (holdActive) {
        holdActive = false;
        // end hold-only operation here, if desired
    }
}
// Optional add-on: if mouse moves out, then release hold
function onMouseOut(){
    onMouseUp();
}

这是一个演示：http: //jsfiddle.net/M7hT8/1/

最初基于 daveyfaherty 的解决方案。我知道这个问题来自不久前，但我正在为通过搜索找到这个问题的任何人分享我的解决方案。

score -1 · Accepted Answer

//last mouse coordinate
var mouseX = 0;
//epsilon interval
var mouseEps = 10;

function mouseDownHandler(e) {
    e.preventDefault();
    mouseX = e.clientX;
};

function mouseUpHandler(e) {
    e.preventDefault();
    if (Math.abs((mouseX - e.clientX)) < mouseEps) {
        clickHandler(e);
    }
};

function clickHandler(e) {
};

javascript - 区分 click 与 mousedown/mouseup

4 回答 4

Related

Reference