如何使用jQuery检测点击而不是拖动？

Question

当用户单击 p 标记时，我有选择文本的代码，但是当用户选择其中的文本时，我不想这样做。是否可以检测点击但不拖动？

我有这样的简单代码：

$('.conteiner').on('click', 'p.xxx', function() {
   $(this).selection();
});

但即使我在 mousedown 和 mouseup 之间拖动也会执行单击。 selection 是一个使用 getSelection 或 Range 选择文本的插件。

Answer 1

与此类似：Can you detect "dragging" in jQuery?

可以使用 mousedown 和 mouseup 来检测是否有拖拽。

 $(function() {
    var isDragging = false;
    $(".conteiner")
    .mousedown(function() {
        $(window).mousemove(function() {
            isDragging = true;
            $(window).unbind("mousemove");
        });
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("mousemove");
        if (!wasDragging) {
            $(this).selection();
        }
    });
  });

这是 plunker 演示： http://embed.plnkr.co/Y7mrOP/

Answer 2

找到更好的方法，因为我需要检测拖动来选择文本，这样效果更好：

var get_selected_text = (function() {
    if (window.getSelection || document.getSelection) {
        return function() {
            var selection = (window.getSelection || document.getSelection)();
            if (selection.text) {
                return selection.text;
            } else {
                return selection.toString();
            }
        };
    } else if (document.selection && document.selection.type !== "Control") {
        return function() {
            return document.selection.createRange().text;
        };
    }
    return function() {
        return '';
    };
})();

self.mouseup(function() {
    if (get_selected_text() === '') {
       // click not drag
    }
});

Answer 3

在高级模式下为闭包编译器键入 OP 解决方案的注释版本

const get_selected_text = (/** @return {function():string} */ function() {
    if (window.getSelection || document.getSelection) {
        return function () {
            const selection = /** @type {function():Object<string,?>} */ (window.getSelection || document.getSelection)();
            if (typeof selection['text'] === "string") {
                return selection['text'];
            } else {
                return selection.toString();
            }
        };
    } else if (document.selection && document.selection.type !== "Control") {
        return function () {
            return document.selection.createRange().text;
        };
    }
    return function () {
        return '';
    };
})();