Question

我有代码在用户点击p标签时选择文字但我不想在用户选择里面的文字时这样做。是否可以检测到点击但没有拖动？

我有这样简单的代码：

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

但即使我在mousedown和mouseup之间拖动，也会执行click。选择是一个使用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

在高级模式下，用于Closure Compiler的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 '';
    };
})();

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

3 个答案: