javascript - Internet Explorer 8 および 9 でイベントを委任する方法

Question

私は次のdivを持っています:

<div class="test0 clickable">
   <div class="test1 clickable">
      <div class="test2 clickable">Click me</div>
   </div>
</div>

「test2」をクリックすると、div test2 が dom から削除され、その後、div test1 が削除されます。IE8 と IE9 を除くすべての主要なブラウザーで動作します。

JavaScript は次のとおりです。

$(".clickable").click(function(event){ 
  //if (some event condition)
     $(this).remove();
});

「イベント」オブジェクトの条件に基づいて両方のdivが削除されるように、クリックイベントがtest2からtest1にバブリングしていることを保証するにはどうすればよいですか?

Answer 1

セレクターと一致する場合は、親を明示的に削除してみてください。

$(".clickable").click(function(){ 
    $(this).remove();
    if ( $(this).parent().hasClass('clickable') ) $(this).parent().remove();
});

Answer 2

IE では、標準化されたイベント フローの実装に問題があるようです。ただし、ノードの削除を延期することで、これを簡単に回避できます。

$(".clickable").click(function(event){
    var toremove = this;
    if (/*some event condition*/)
        setTimeout(function(){
            $(toremove).remove();
        }, 0);
});

Answer 3

stopPropagation を使用する

$(".clickable").click(function(event){ 
      event.stopPropagation();
      $(this).remove();
});