javascript - JQueryを使用して、DOMを伝播するクリックイベントを停止するにはどうすればよいですか？

Question

次のHTMLスニペットがあるとします。

<li class="list">
  <img src="/assets/img/site/arrow_black.png"/>My List Element<span class="star"></span>
</li>

クリックイベントをli要素にバインドし、クリックイベントを.starクラスにバインドすると、質問は次のようになります。

li星をクリックしたときに発射のクリックイベントを停止するにはどうすればよいですか？

私のJQueryコードは、次のように見えます。

$(".list").click(function() {
//do something
}

$(".star").click(function() {
//do something
}

Answer 1

jQuery.stopPropagation（）を参照してください

$(".star").click(function(e) {
    e.stopPropagation();
    // do work
}

Answer 2

試すevent.stopPropagation();

$(".star").click(function(event) {
  event.stopPropagation();
  // Do something
}

Answer 3

.starの均等な伝播を停止する必要があります。

http://api.jquery.com/event.stopPropagation/

$(".star").click(function(ev) {
    ev.stopPropagation();
});

Answer 4

イベント委任を使用できます。

イベントリスナーをulに適用します

document.getElementById("parent-list").addEventListener("click",function(e) {

if(e.target && e.target.nodeName == "LI") {
    var classes = e.target.className.split(" ");

    if(classes) {

      for(var x = 0; x < classes.length; x++) {

        if(classes[x] == "star") { // do your thing
                                  }
                    }
          }
  }
});

});

または単にpreventDefaultを使用してクラスにスターを付けます