将 Hammer.js“hold”事件附加到 IE 10 下的表格行中断文本选择
Attaching Hammer.js 'hold' event to table row breaks text selection under IE 10
我发现附加到表行的一些 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 = '';
相关文章:
- 使用下拉选择菜单高亮显示一行表格单元格
- 联系表格(具体选择)和电子邮件
- Google 图表 - 设置选择不会滚动到表格可视化中的选定行
- 获取表格行数据td并选择
- 知道单击“确定”时选择了表格的哪个单元格
- 提交建议选择的地理完成表格
- 从所选内容中选择选项,并在表格单元格中显示所选内容的信息
- 如何访问HTML表格单元格中的选择
- 如何根据下拉列表中的选择隐藏表格行
- 根据选择显示表格/表单
- 多项选择退订表格
- 根据用户选择的纸张大小打印适合大小的html表格
- Yii2:Jquery 选择表格单元格的 id 不起作用
- 限制在多个表格上选择单元格
- 如何选择与另一个表格单元格有某种关系的某个表格单元格
- 选择的输入不会在表格内对齐
- 使用基于单选按钮选择的 jquery 将表格单元格添加到行尾
- j查询选择7个表格单元格之后
- 选择 2 行之间的表格行
- 如何在表格选择过滤器上放置占位符文本