他の場所のクリックイベントですか？

Question

スタイルを変更するonClickイベントがあります。ユーザーがアイテムの他の場所をクリックしたときにスタイルを元に戻す方法は？

プロトタイプライブラリとスクリプトライブラリの両方が含まれています。以下の回答の多くは、それらのものでは機能しません...要素のIDもUNDEFINEDなので、javascriptでは参照できません。

おかげで、ヤン

Answer 1

私が持っていますすべてのブラウザでこれをテストしていますが、任意の新しいJSフレームワークを導入したくない場合は、このソリューションは、CSSは使用しない：

<ul> 
    <li tabindex="1">First</li> 
    <li tabindex="2">Second</li> 
</ul> 

をプロパティのtabIndexはFO li要素になりますcusable。そして、CSS：

li { color: #F00; } 
li:focus { color: #0F0 } 

これはもちろん、非常に基本的なスタイリングです、おそらくクラスやそれに入れたいと思っています。

Answer 2

私はjQueryのライブイベントを使用してアイテムをその上でクリックされたとき:not selector

Answer 3

を使用してイベントをクリックして結合するであろう、それがフォーカスを取得。何か他のものがクリックされるとはonblurイベントを引き起こし、フォーカスを失います。すべての要素で機能しないかもしれませんが、例えば<input>要素の場合はうまくいくでしょう。

Answer 4

大きな質問！

if (event.target === myElement) { 
    changeStyle(); 
} else { 
    changeStyleBack(); 
} 

：あなたの代わりにあなたの要素のonclickイベントで、あなたが高いオブジェクトのイベントハンドラを定義することを意味し、「イベントはバブリング」を使用することができます（たとえば、 documentまたは table）、そしてそこには、あなたが何かのように言います

よりここに（および他の場所）：http://www.southsearepublic.org/tag/Javascript%20Event%20Bubbling/read

Answer 5

あなたはonblurイベントをしたい：「オブジェクトがフォーカスを失ったときにonBlurイベントが発生します」。

Answer 6

タグ内にonclick="function1()" onblur="function2()"またはonfocus="function1()" onblur="function2()"と表示されている可能性があります。ここで

Answer 7

あなたはjQueryのでそれを行うことができる方法です：

$(document).click(function(e) { 
    if ($(e.target).is("#specialItem")) { 
    $(e.target).addClass("specialClass"); 
    } else { 
    $(#specialItem").removeClass("specialClass"); 
    } 
}); 

あなたはjQueryのを使用していない場合でも、基本的なモデルを使用することができます - ドキュメントレベルでonclickイベント・ロジックを適用します。これは、ぼかしイベントに応答しないアイテムに対して機能します。

Answer 8

bodyでonClickイベントをバインドし、そのイベントにスタイルを復元する関数を割り当てることができます。

あり私が試作品を使用していたので、かなり長い時間がかかったhttp://jsbin.com/oxobi3

Answer 9

でのライブの例ですが、私はこれがあなたの役に立てば幸い（非jQueryの意味で。）

$(window).observe('click', respondToClick); 

function respondToClick(event) { 
var element = event.element(); 
if(!($(this) == element)){ 
    element.addClassName('active');//or do your stuff here 
} 


} 

Answer 10

私のアプローチ

var elsewhere = 1; 
$(myelement).bind('hoverin',function(){ 
    elsewhere = 0; 
}); 
$(myelement).bind('hoverout',function(){ 
    elsewhere = 1; 
}); 

$('screenarea').click(function(){ 
    if(elsewhere){ 
     change-style-back(); 
    } else{ 
     change-style(); 
    } 
}); 

これは、画面上のどこかをクリックし、そのないあなたの要素にする場合、そのスタイルはjQueryのトグルを使用してバック