Question

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

我使用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应用于此表的方法。所以描述的问题不会发生。

Answer 1

我在github上提出了针对hammer.js的问题，万一这是一个bug，得到了我想要的答案：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 = '';

将Hammer.js'hold'事件附加到表行，在IE 10下将文本选择附加到文本中

1 个答案: