4

私は再びあなたの援助を切実に必要としています。

つまり、基本的にdiv、id = "parent"があり、その内容と一緒に非表示にしたいと考えています。また、このdiv内に「nested」のidを持つdivをネストしました。「親」は「ネスト」よりも幅が広いので、「親」をクリックすると非表示機能がアクティブになりますが、「ネスト」をクリックしてもこの非表示機能はアクティブになりません。

ただし、「親」をクリックしたときと「ネスト」をクリックしたときに機能がアクティブになります。コードは次のとおりです。

HTML:

<div id="parent">
    <div id="nested">
        <p>Contents</p>
    </div>  
</div>

JQUERY :(非表示機能を表すためにconsole.logをそこに配置します)

var parent = $('#parent');
var nested = $('#nested');

parent.not(nested).click(function(){
    console.log('Click');
});

シンプルなはずなのにわかりません!私のセレクターは間違っていますか?これはJQueryでは簡単にできないことですか?どんな助けでも大歓迎です!

ありがとうございました!

4

2 に答える 2

13

イベントは常にバブルアップします。したがって、ネストされたdivをクリックすると、そのクリックイベントが親にバブルされます。

私が正しく理解していれば、親がクリックされたときにのみクリックイベントを実行し、ネストされたdiv自体は実行しません。

現在のイベントが実際に親によってトリガーされたことを検証してから、コードを実行するだけです。

明らかにクロスブラウザ互換ではないため、代わりにevent.target
を使用するように更新されましたevent.srcElement

var parent = $('#parent');

parent.click(function(event){
    if(event.target === this){
      console.log("parent was clicked and we execute actions...");
    }
    else{
        console.log("something else within parent was clicked and is ingored...");
    }
});​

</ p>

デモ

無視したいすべてのdivにクリックイベントを添付することはお勧めしません。これは、多くのメンテナンスを行う方法であり、最終的にネストされたdivでアクションが必要になると、エラーが発生しやすくなります。

于 2012-09-29T13:00:44.970 に答える
5

試す

$('#nested').click(function(e) { 
    e.stopPropagation();
  });
于 2012-09-29T13:00:15.880 に答える