在 JavaScript 中跨浏览器检测点击与鼠标拖动

Question

在 jQuery 终端中，我有绑定鼠标的代码 down/up/move 来检测用户是否使用单击而不是拖动。

代码如下所示：

            (function() {
                var count = 0;
                var isDragging = false;
                var $target;
                var name = 'click_' + self.id();
                self.mousedown(function(e) {
                    console.log('down');
                    isDragging = false;
                    $target = $(e.target);
                    if (e.originalEvent.button === 2) {
                        return;
                    }
                    self.oneTime(1, function() {
                        $(window).one('mousemove.terminal_' + self.id(), function() {
                            console.log('move');
                            isDragging = true;
                            count = 0;
                        });
                    });
                }).mouseup(function() {
                    console.log('up');
                    var wasDragging = isDragging;
                    isDragging = false;
                    $(window).off('mousemove.terminal_' + self.id());
                    console.log(wasDragging);
                    if (!wasDragging) {
                        if (++count === 1) {
                            if (!self.enabled() && !frozen) {
                                self.focus();
                                command_line.enable();
                                count = 0;
                            } else {
                                self.oneTime(settings.clickTimeout, name, function() {
                                    if ($target.is('.terminal') ||
                                        $target.is('.terminal-wrapper')) {
                                        var len = self.get_command().length;
                                        self.set_position(len);
                                    } else if ($target.closest('.prompt').length) {
                                        self.set_position(0);
                                    }
                                    count = 0;
                                });
                            }
                        } else {
                            self.stopTime(name);
                            count = 0;
                        }
                    }
                }).dblclick(function() {
                    count = 0;
                    self.stopTime(name);
                });
            })();

（代码也处理双击，不记得为什么）。

但是 Chrome/MacOS 上有问题（我正在 VirtualBox 中测试它，但有人也报告了这个问题）即使没有鼠标移动也没有拖动，鼠标移动也会被触发。

mousemove 事件（在 MacOS/Chrome 上）似乎在鼠标实际移动后绑定时触发。

是否有更好的解决方案来检测点击但不检测拖动，该解决方案既适用于 MacOS，也适用于其他 OS/Browsers？

Answer 1

我想我已经通过使用此跨浏览器功能检查是否选择了任何文本来替换 mousemove 来解决问题

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

在 JavaScript 中跨浏览器检测点击与鼠标拖动

Cross Browser detection of click vs mouse drag in JavaScript

javascript

macos

jquery

jquery-terminal