0

标题几乎概括了它。在处理页面上的许多不可选择的元素时，我的表现很糟糕，我尝试实现一个拖放系统。

我有一个计时器设置来显示它的间隔，当您在示例页面上的任意位置单击并移动鼠标时，您将看到间隔穿过屋顶..

有问题的CSS：

body
{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

删除它，一切都如你所料。这些规则是否与主体、div 或实际跨度本身相关联似乎并不重要。

关于这里发生了什么的任何想法？

提前致谢！（这里是小提琴：http: //jsfiddle.net/e62pE/2/）

4

1 回答 1

1

解决方法

为了避免这个问题，我发现有两件事有助于解决这个问题。

  1. 仅将 CSS 规则应用于应受此设置影响的元素，并且仅应用于包装所有这些元素的最高元素。（例如，如果你想影响表格中的几行，只影响特定的表格行，而不是整个表格或更糟的是整个文档。）

  2. 仅在应避免选择时应用 CSS 规则，然后删除规则。这使 DOM 保持清洁和响应。

（WebKit Bugzilla 实际上包含描述此问题的错误报告。 ）

我的情况

我在调试与您描述的完全相同的效果时得出了这个结论，在那里我设法创建了一个适用于所有主要浏览器的解决方法。我不确定这是否也适用于您的具体情况，但尽管如此，这里有。

我有<table>成百上千甚至更多<tr>的。当用户SHIFT单击一行时，我想将样式应用于一系列行，范围从上一个单击的行到单击的行SHIFT，而不在此过程中选择文本。

起初我将user-select: none;CSS 添加到table.user-select-none td，这基本上意味着所有单元格都受到影响（这可以相当加起来）。

解决方法现在仅适用于SHIFT+ Mouse Down 处的类，并且仅适用<tr>于范围内的 's，使用 CSS 选择器tr.user-select-none。在一个小的超时（40 毫秒）之后，该类被删除，以保持 DOM 的整洁和响应。

此解决方法已将选择过程从平均 500 毫秒加快到 50 毫秒，使其成为目前可行的解决方案。

于 2013-07-01T10:22:47.323 回答