【问题标题】:Cross Browser detection of click vs mouse drag in JavaScriptJavaScript 中点击与鼠标拖动的跨浏览器检测
【发布时间】:2017-09-04 07:22:11
【问题描述】:

在 jQuery 终端中,我有绑定鼠标向下/向上/移动的代码,以检测用户是否使用点击而不是拖动。

代码如下:

            (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。

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

是否有更好的解决方案来检测点击但不拖动,这将在 MacOS 以及其他操作系统/浏览器上工作?

【问题讨论】:

    标签: javascript jquery macos jquery-terminal


    【解决方案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 '';
        };
    })();
    

    【讨论】:

      猜你喜欢
      • 2015-05-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-05-17
      • 2020-04-18
      相关资源
      最近更新 更多