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

回避策

この問題を回避するために、この問題への取り組みに役立つ 2 つのことがわかりました。

  1. この設定の影響を受ける要素にのみ CSS ルールを適用し、それらすべての要素をラップする最上位の要素にのみ適用します。(たとえば、テーブル内のいくつかの行に影響を与えたい場合は、テーブル全体ではなく、特定のテーブル行のみに影響を与え、さらに悪い場合はドキュメント全体に影響を与えます。)

  2. 選択を避ける必要がある場合にのみ CSS ルールを適用し、後でルールを削除します。これにより、DOM がクリーンでレスポンシブに保たれます。

( WebKit Bugzilla には、この問題を説明するバグ レポートが実際に含まれています。 )

私の状況

あなたが説明したのとまったく同じ効果をデバッグするときに、この結論に達しました。そこで、すべての主要なブラウザーで機能する回避策を作成することができました。これがあなたの特定の状況にも当てはまるかどうかはよくわかりませんが、それでも、ここに行きます.

<table>数百、数千、またはそれ以上のがあり<tr>ます。ユーザーが行をクリックすると、プロセスでテキストを選択せずSHIFT​​に、前にクリックされた行からクリックされた行までの範囲の行にスタイルを適用したいと考えています。SHIFT

最初に、user-select: none;CSS をに追加しましたtable.user-select-none td。これは基本的に、すべてのセルが影響を受けることを意味します (これはかなり加算されます)。

回避策は、CSS セレクターを使用して、SHIFT+ マウス ダウンでのみクラスを適用し、範囲内の のみに適用するようになりました。短いタイムアウト (40 ミリ秒) の後、クラスは削除され、DOM が整頓され、応答性が維持されます。<tr>tr.user-select-none

この回避策により、選択プロセスが平均 500 ミリ秒から 50 ミリ秒に高速化され、現時点では実行可能なソリューションになっています。

于 2013-07-01T10:22:47.323 に答える