jQuery 区分点击 vs mousedown/mouseup

Differentiate click vs mousedown/mouseup

提问by aperture

I've read several answers on stackoverflow pertaining to this situation, but none of the solutions are working.

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

I'm trying to do different things based upon whether a user clicks an element, or holds the mouse down on that element using jQuery.

我正在尝试根据用户是单击某个元素还是使用 jQuery 将鼠标按住该元素来执行不同的操作。

Is it possible to accomplish this?

有没有可能做到这一点？

采纳答案by daveyfaherty

Here's one approach

这是一种方法

1. set a variable to true
2. make a function that will set it to false when called
3. have a timer ( setTimeout()) start counting down on mousedown()
4. on mouseup, clear the timeout, and check if it the variable is true or false
5. if it is false, call the function you want to happen on click
6. In any case, set the variable back to true

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

This will do what you want. Here's a jsfiddle showing how it might work: http://jsfiddle.net/zRr4s/3/

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

回答by Anton Baksheiev

onMouseDown will trigger when either the left or right (or middle) is pressed. Similarly, onMouseUp will trigger when any button is released. onMouseDown will trigger even when the mouse is clicked on the object then moved off of it, while onMouseUp will trigger if you click and hold the button elsewhere, then release it above the object.

onMouseDown 将在按下左侧或右侧（或中间）时触发。同样，当任何按钮被释放时，onMouseUp 都会触发。即使鼠标在对象上单击然后从对象上移开，onMouseDown 也会触发，而如果您在别处单击并按住按钮，然后将其释放到对象上方，则 onMouseUp 将触发。

onClick will only trigger when the left mouse button is pressed and released on the same object. In case you care about order, if the same object has all 3 events set, it's onMouseDown, onMouseUp, then onClick. Each even should only trigger once though.

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

Details:

细节：

• http://api.jquery.com/click/
• http://api.jquery.com/mouseup/
• http://api.jquery.com/mousedown/

• http://api.jquery.com/click/
• http://api.jquery.com/mouseup/
• http://api.jquery.com/mousedown/

回答by bassguy007

Here's a solution that supports both clicks and holds:

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

// 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();
}

Here's a demo: http://jsfiddle.net/M7hT8/1/

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

Originally based on daveyfaherty's solution. I know this question is from a while ago, but I'm sharing my solution for anyone who finds this via a search.

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

回答by StuS

//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) {
};