4

親のonclickイベントをトリガーしながら、子のonclickイベントを停止するにはどうすればよいでしょうか。たとえば、次の構造です。

<div id="parent">
   <div id="child1"></div>
   <div id="child2"></div>
   <div id="child3"></div>
</div>

たとえば、「child1」をクリックすると、「child1」のonclickイベントはトリガーされませんが、「parent」のonclickイベントはトリガーされます。

どうもありがとうございます！

4

4 に答える 4

2

これを行う最も簡単な方法は、子のイベントハンドラーのバインドを解除することです。

$('#child1').unbind('click');
于 2012-09-05T09:31:25.437 に答える
2

click親に渡すだけでいいですか？

$('.child1').click(function(e){
    e.preventDefault();
    $(this).parent('#parent').trigger('click');
});

.child1をクリックすると、デフォルトのアクションが実行されなくなりchild1、IDが#parentのの親のクリックがトリガーされます。

実際には-おそらく上記を無視してください-以下のコメントによると、それはバブリングを引き起こす可能性があります。あなたが本当にする必要があるのは使用することだけですe.stopPropagation();。

クリック関数がバインドされているにもかかわらず無視されているため、親クリックのみが取得されることを示すjsfiddleを作成しました。child1

于 2012-09-05T09:35:25.520 に答える
2

上記の問題の解決策のビンは次のとおりです。デモリンクを一度確認してください。

デモ： http ：//codebins.com/bin/4ldqp7l

HTML

<div id="parent">
  <div id="child1">
    Child-1
  </div>
  <div id="child2">
    Child-2
  </div>
  <div id="child3">
    Child-3
  </div>
</div>

jQuery

$(function() {
    $("#parent").click(function() {
        alert("Parent has been clicked too...!");
    });
    $("#child1").click(function(e) {
        e.stopPropagation();
        alert("Child-1 has been clicked...!");
    });
    $("#child2").click(function() {
        alert("Child-2 has been clicked...!");
    });
    $("#child3").click(function() {
        alert("Child-3 has been clicked...!");
    });
});

CSS

#parent{
  padding:5px;
  background:#a34477;
  width:140px;
  text-align:center;
  padding:10px;
}

#parent div{
  border:1px solid #2211a4;
  background:#a3a5dc;
  width:100px;
  text-align:center;
  font-size:14px;
  margin-left:10px;
  margin-top:3px;
}

デモ： http ：//codebins.com/bin/4ldqp7l

于 2012-09-05T12:44:01.503 に答える
1

どういう意味ですか：

$('#parent').on('click', function(e) { 
   if( e.target !== this ) {
       return;
   }
});
于 2012-09-05T09:31:28.367 に答える