javascript - 如何在 Javascript/jQuery 中检测双击拖动

Question

当用户通过拖动选择某些文本时，我想在网页中进行检测。但是，在 Windows 中有一种情况，我称之为“双击拖动”(抱歉，如果已经有更好的名字我不知道)，我不知道如何检测它。它是这样的:

1. 按下鼠标键
2. 快速释放鼠标按钮
3. 再次快速按下鼠标按钮
4. 按住按钮拖动

这会导致拖动选择整个单词。从用户的 Angular 来看，这是一项非常有用的技术。

我想做的是区分双击拖动和单击后单独拖动之间的区别。因此，当我进入第 2 步时，我将获得一个点击事件，但我不想将其视为点击；我想看看他们是否会立即执行第 3 步。

据推测，Windows 会根据时间以及鼠标在第 2 步和第 3 步之间移动了多少来检测到这一点，但我不知道它使用的参数，所以我无法复制 Windows 逻辑。请注意，即使鼠标在第 2 步和第 3 步之间根本没有移动，我仍然会收到 mousemove 事件。

我意识到我应该设计触摸友好和设备中立的界面，并且我完全有意支持其他设备，但这是一个针对 Windows PC 用户的企业应用程序，所以我想优化这个案例如果可以的话。

Answer 1

我们做过类似的事情。我们的最终解决方案是创建一个抑制默认响应的点击处理程序，然后将全局变量设置为当前日期/时间。然后我们将另一个函数设置为在大约 200 毫秒内触发，以处理“点击”事件。这是我们的基本功能。

然后我们修改它以查看全局变量以确定最后一次点击发生的时间。如果小于 200 毫秒(根据您的需要进行修改)，我们会设置一个标志，使点击处理程序失效并调用双击处理程序。

您可以通过让您的单击和双击处理程序手动触发拖动功能来扩展该方法。

我现在无法访问上述代码，但这里有一个框架示例，该框架用于跟踪键盘点击以确定扫描仪或用户是否已在字段中完成输入:

    var lastKeyPress    = loadTime.getTime();

    // This function fires on each keypress while the cursor is in the field.  It checks the field value for preceding and trailing asterisks, which
    // denote use of a scanner.  If these are found it cleans the input and clicks the add button.  This function also watches for rapid entry of keyup events, which 
    // also would denote a scanner, possibly one that does not use asterisks as control characters.
    function checkForScanKeypress() {
        var iVal = document.getElementById('field_id').value;

        var currentTime = new Date()
        var temp        = currentTime.getTime();
        if (temp - lastKeyPress < 80) {
            scanCountCheck = scanCountCheck + 1;
        } else {
            scanCountCheck = 0;
        }
        lastKeyPress    = currentTime.getTime();
    }


    // The script above tracks how many successive times two keyup events have occurred within 80 milliseconds of one another.  The count is reset
    // if any keypress occurs more than 80 milliseconds after the last (preventing false positives from manual entry).  The script below runs
    // every 200 milliseconds and looks to see if more than 3 keystrokes have occurred in such rapid succession.  If so, it is assumed that a scanner
    // was used for this entry.  It then waits until at least 200 milliseconds after the last event and then triggers the next function.
    // The 200ms buffer after the last keyup event insures the function is not called before the scanner completes part number entry.
    function checkForScan() {
        var currentTime = new Date();
        var temp        = currentTime.getTime();
        if (temp - lastKeyPress > 200 && scanCountCheck > 3) {
            FiredWhenUserStopsTyping();
            scanCountCheck = 0;
        }
        setTimeout(checkForScan, 200);
    }

下面是我根据上述想法刚刚写的一些代码。它未经测试，也不包含实际的拖动事件，但应该为您提供一个良好的起点:

    var lastClick   = loadTime.getTime();

    function fireOnClickEvent(event) {
        event.preventDefault;

        var currentTime = new Date()
        var temp        = currentTime.getTime();
        if (temp - lastClick < 80) {
            clearTimeout(tf);
            doubleClickHandler();
        } else {
            tf          = setTimeout(singleClickHandler, 100);
        }
        lastClick       = currentTime.getTime();
    }

    function singleClickHandler() {
        // Begin normal drag function
    }

    function doubleClickHandler() {
        // Begin alternate drag function
    }