web-dev-qa-db-ja.com

方法：onclick javascriptを使用した別のdiv内のonclickを使用したdiv

簡単な質問です。私はお互いにonclick javascriptを使用したdivで問題が発生しています。内側のdivをクリックすると、onclick javascriptのみが起動されますが、外側のdivのjavascriptも起動されます。ユーザーは、外部divのjavascriptを起動せずに、どのようにして内部divをクリックできますか？

<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
javascripthtmlonclick
43
Daniel Brink

基本的に、javascriptには2つのイベントモデルがあります。 イベントキャプチャおよびイベントバブリング。イベントバブリングで、内側のdivをクリックすると、内側のdivクリックイベントが最初に発生し、次に外側のdivクリックが発生します。イベントのキャプチャ中に、最初に外側のdivイベントが発生し、内側のdivイベントが発生しました。イベントの伝播を停止するには、クリックメソッドでこのコードを使用します。

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
91
Adeel

イベントの伝播に関する情報を確認してください here

特に、イベントハンドラーで次のようなコードを使用して、イベントの伝播を停止します。

function myClickHandler(e)
{
    // Here you'll do whatever you want to happen when they click

    // now this part stops the click from propagating
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}
18
Tim Goodman

このコードを追加するだけです：

window.event.stopPropagation();
6
user3438083

return false;内側のdivのonclick関数から：

<div onclick="alert('inner'); return false;" ...

あなたが扱っているものは イベント伝播 と呼ばれます。

5
Tatu Ulmanen

Webkitベースのブラウザのもう1つの方法：

<div onclick="alert('inner'); event.stopPropagation;" ...
3
Juliano Moraes

これはイベントバブリングの場合です。

使用できます

e.cancelBubble = true; //IE

そして

e.stopPropagation(); //FF
3
rahul

これは非常に役に立ちましたが、私にはうまくいきませんでした。

私がやったことは ここ と記述されています。

そこで、外側のonclickイベントに条件を追加しました。

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}
0
shooby

ここ は、javascriptイベントのバブリングを理解するのに役立つ参照です。

0
Ben

これはJqueryで私のために働いた：

$('#outer_element').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("Outer element is clicked")                       
});

この方法では、現在のターゲットが外側のdivと同じでない場合、何もしません。子要素に通常の機能を実装できます。

0
Ramtin

使用できます

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });
0
AngelQuesada

2つの「div」と3つの「/ div」があります。

0
freddie