13

この Web ページの一部のテキストを強調表示してから、基本的にドキュメントの任意の場所をクリックします。選択が消えます。

ユーザーが CSS または Javascript のいずれかによって特定の要素をクリックしたときに、この動作を防ぐ方法はありますか?

例えば：

var element = document.getElementById("foo");
foo.onclick = function(e){
   //some magic here that prevents deselection from occuring
}

また

foo.style.preventDeselect = "true";

編集:おそらく、選択を保存してから、「マウスクリック」後に選択を復元できますか? 選択を保存してから再選択する方法はありますか?

ありがとう！

4

6 に答える 6

8

onmousedown の「return false」と「e.preventDefault()」は、FF と Safari では機能しますが、IE では機能しません。私が知る限り、IE の唯一の解決策は、エラーをスローすることです。

これはすべてのブラウザーで機能します (ただし、preventDefault はメソッドではないため、IE ではエラーが発生します)。

//clicking the 'test' element will not deselect text.
var test = document.getElementById("test");
test.onmousedown = function(e){
  e = e || window.event;
  e.preventDefault();
}

可能であれば、IEでこれをエラーなしで実行したいと思います

「onmousedown」のヒントを提供してくれた Paolo Bergantino に感謝します。

于 2009-01-28T04:26:15.543 に答える
2

これは Firefox で動作しますが、IE は試していません。foo.style.preventDeselect = "true";テキストを選択した状態で線をクリックしてみてください。イベントを使用しmousedownます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('#test').mousedown(function() {
        return false;
    });
});
</script>
<body>

Highlight some text on this webpage, then click basically anywhere on the document. Your selection will disappear.<br><Br>

Is there a way to prevent this behavior when the user clicks on a specific element, either by CSS or Javascript?<br><Br>

E.g.:<br><Br>

var element = document.getElementById("foo");<br>
foo.onclick = function(e){<br>
   //some magic here that prevents deselection from occuring<br>
}<br><Br>

or<br><Br>

<span id='test'>foo.style.preventDeselect = "true";</span><br><Br>

Thanks!<br><Br>

</body>
</html>
于 2009-01-28T03:56:01.313 に答える
1

どうですか

if(e.preventDefault) 
    e.preventDefault();
else
    e.returnValue = false;
于 2009-01-28T05:26:08.323 に答える
1

この動作は、最近のブラウザーではほとんど普遍的ですが、ブラウザー/実装に固有であり、CSS や Javascript とはほぼ完全に無関係です。特に、Firefox は、ページ全体とテキスト ボックスの内容に対して別々の選択状態を維持しますが、IE はこれを行いません。さらに悪いことに、マウスとキーボードの選択インターフェイスが別々のテキスト モード ブラウザーを考えてみましょう。

于 2009-01-28T03:54:46.807 に答える
0

これを行う方法を見つけた最善の方法は、IE の場合、「onselectstart」でリスナーをセットアップする必要があることです。Mozilla およびその他のブラウザーの場合は、'mousedown' で実行できます。これは、サイトの他の部分で「mousedown」を使用しない場合にのみ機能します!

スニペット: YUI の方法: FF ブラウザー:

  • YAHOO.util.Event.addListener(window, 'mousedown', function(evt) { YAHOO.util.Event.preventDefault(evt); });

    IE ブラウザー: IE では機能しないため、IE ではこのリスナーをウィンドウに設定することはできません。最善の方法は、ボディ要素にクラス要素を設定し、それを参照して、その要素オブジェクトにリスナーを適用することです。

  • // クラスごとに要素を取得し、var に割り当てます bar YAHOO.util.Event.addListener(bar, 'selectstart', function(evt) { YAHOO.util.Event.preventDefault(evt); });

簡単な方法でやりたい場合は、

  • window.onMouseDown = function() {false を返す;}

またはIEの場合

  • body.onSelectStart = function() {false を返す;}

お役に立てれば。

于 2010-01-21T22:19:36.767 に答える
0

誰かがこれをチェックアウトした場合に備えて、私は同様の問題を抱えていました。ツールバーボタンをクリックして起動された選択したテキストの一部でJavaScriptを実行する必要がありました（背景画像のスパン）。「javascript:void(0)」の href でスパンをアンカーに変更することで問題を解決しました。これにより、選択したテキストが選択解除されなくなりました。

于 2009-09-14T14:09:18.757 に答える