Question

当用户通过拖动选择一些文本时，我想在网页中检测到。但是，在Windows中有一种情况，我称之为“双击 - 拖动”（抱歉，如果已经有一个更好的名称，我不知道），我无法弄清楚如何检测它。它是这样的：

按鼠标按钮
快速释放鼠标按钮
再次快速按下鼠标按钮
按住按钮拖动

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

我要做的是告诉双击拖动和点击后跟单独拖动之间的区别。因此，当我进入第2步时，我将获得点击事件，但我不想将其视为点击;我想看看他们是否马上要做第3步。

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

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

Answer 1

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

然后我们修改它以查看全局变量以确定最后一次点击发生的时间。如果它小于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
    }

如何检测javascript / jQuery中的双击拖动

1 个答案: