将 Hammer.js“hold”事件附加到 IE 10 下的表格行中断文本选择

Attaching Hammer.js 'hold' event to table row breaks text selection under IE 10

本文关键字：表格 选择 文本 中断 IE js Hammer hold 事件      更新时间：2023-09-26

我发现附加到表行的一些 javascript 代码会破坏子文本框中的文本选择（鼠标或键盘），这似乎只发生在 IE 下（在 v10 和 v11 中测试）。最新的chrome和火狐浏览器不显示此问题。似乎简单地附加事件会导致问题，而不是回调本身。

我已经使用JSFiddle重现了这个问题：http://jsfiddle.net/7dQ66/5/

HTML 是这样的：

<table border="1" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <td>Option</td><td>Job</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input/></td><td>Text</td>
        </tr>
    </tbody>
</table>

javascript是这样的：

$(document).ready(function () {
        // Attach 'hold' touch event to each row in each subfile
        $("table tr").hammer().on("hold", function (event) {
            event.stopPropagation();
            event.preventDefault();
            alert('true');
            $(event.delegateTarget).addClass("row-active");
            $(event.delegateTarget).removeClass("ow-active");
        });
});

我很想知道是否有人解决了这个问题，或者也许还有另一种方法可以将 Hammer.js 应用于这个"表"，这样就不会发生所描述的问题。

我在github上提出了针对锤子.js的问题，以防这是一个错误并得到了我正在寻找的答案：https://github.com/EightMedia/hammer.js/issues/532

事实证明，hammer.js有一个默认选项"stop_browser_behavior.userSelect"，该选项设置为"none"。目前尚不清楚为什么它仅适用于IE，但它确实在与默认"userSelect"值相关的注释中声明：

// this also triggers onselectstart=false for IE

我的猜测是这与它有关。

在我的代码开头添加以下 javascript 可以解决此问题：

Hammer.defaults.stop_browser_behavior.userSelect = '';
相关文章：