Question

我正在制作一个警示框。我希望用户能够点击它来解除它，但是如果他们点击并拖动以选择其中的消息，我不希望它消失在他们身上。

释放鼠标按钮时，.on('click'事件似乎即会发生，即使他们已做出选择，也可能等待几秒钟。

如何检测此类点击？

Answer 1

我为解决这个问题所做的是

$(document).on("click", ".my-clickable-class", function(){
    //
    ///don't fire if the user was selecting something
    //
    if(window.getSelection().toString()!="")
        return;
    //do click stuff
});

它只检查用户是否进行了文本选择。如果他们这样做，请不要执行点击行为。

Answer 2

如果您试图在鼠标停止时检测mouse moved是否检查过这个小提琴：http://jsfiddle.net/ggqo4nt7/

var isMouseDown = false;
var mouseX;
var mouseY;
var oldMouseX;
var oldMouseY;

$("div").bind("mousemove", function(e) {
    if(!isMouseDown) {
        oldMouseX = e.pageX;
        oldMouseY = e.pageY;
    }
    else {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }
});

$("div").bind("mousedown", function() {
    isMouseDown = true;
});

$("div").bind("mouseup", function() {
   isMouseDown = false;
    if(mouseX != oldMouseX && mouseY != oldMouseY) {
      alert("Ive been clicked and I moved");   
    }
    else {
      alert("Ive been clicked");   
    }
});

Answer 3

以下是我提出的基于Travis' solution的内容，但更简单一点：

var mouseMove = false;
$item.on('mousemove', function() {
    mouseMove = true;
}).on('mousedown', function() {
    mouseMove = false;
}).on('mouseup', function() {
    if(!mouseMove) {
        fadeOut();
    }
});

我只是希望我的用户足够灵巧点击而不拖动任何一个像素。

检测点击没有选择？

3 个答案: