解决方法

Question

标题几乎总结了它。在处理页面上的大量不可选元素时，我的表现很糟糕，我试图实现拖放系统。

我有一个计时器设置来显示它的间隔，当你在示例页面上点击并移动鼠标时，你会看到通过屋顶的间隔..

违规的css：

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

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

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

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

Answer 1

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

仅将CSS规则应用于应受此设置影响的元素，并且仅应用于包含所有这些元素的最高元素。（例如，如果要影响表中的几行，只影响特定的表行，而不是影响整个表，或者更糟的是整个文档。）
仅在应避免选择时应用CSS规则，之后删除规则。这使DOM保持清洁和响应。

（ WebKit Bugzilla实际上包含描述此问题的bug report。）

我的情况

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

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

首先我将user-select: none; CSS添加到table.user-select-none td，这基本上意味着所有细胞都受到影响（可以相当多）。

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

这种解决方法将选择过程从平均500毫秒加速到50毫秒，使其成为现在可行的解决方案。