一些相当于停止传播？

Question

我有一个问题...

我正在尝试使用以下方法获取元素 ID：

$('div').on('click',function(ev){
     ev.stopPropagation();
     checkEl = $(this).attr('id');
     if(checkEl != 'topics' && checkEl != 'exfillVal' ){
          $("#topics").hide();
     }
  })

但是...它还会用不同的事件侦听器（单击一个）阻止其他元素... 我怎样才能做到这一点？

$(function(){
var newHTML =[];
$('div').on('click',function(ev){
    ev.stopPropagation();
    checkEl = $(this).attr('id');
    if(checkEl != 'topics' && checkEl != 'exfillVal' ){
         $("#topics").hide();
         newHTML.push('<span class="reopen"  title="usuń">' + checkEl + '</span>');
    }
    $('#new').html(newHTML);
  })
  
  $('body').on('click', '.reopen',function(){ 
  $(this).hide();
  $("#topics").show();
  })
  
  // but that work
$('.reopen').on('click',function(){
  $(this).hide();
   $("#topics").show();
})


})

#main{
position:relative;
width:300px;
background-color:red;
}
div{
position:relative;
border:1px solid gray;
padding:15px;
width:100%:
}
#one{
background-color:black;
}
#two{
background-color:blue;
}#three{
background-color:orange;
}#four{
background-color:yellow;
}#fifth{
background-color:purple;
}
span{
padding:3px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="one">
<div id="three">
<div id="four">
<div id="fifth">
</div>
</div>
</div>
</div>
<div id="topics">SOME COOL DATA </div>

</div>

<div id="new"></div>;

如您所见，当我点击 ID 为 "one,two,three,four,fifth,main" 的 div 时，一切正常...但是当点击 append span 元素时...事件侦听器无法正常工作，因为追加元素在单击时被隐藏...而不是创建另一个元素...我在哪里遇到问题？

我可以用其他东西代替传播吗？

如何重新排列代码？

任何帮助将不胜感激

Answer 1

您可以通过比较 ev.target 和 ev.currentTarget 来验证处理程序是在处理原始元素还是在处理父元素。当它们相同时，您就知道点击确实是在该元素上，而不是您正在查看的父元素：

$('div').on('click',function(ev){
     checkEl = $(this).attr('id');
     if (ev.target === ev.currentTarget && checkEl != 'topics' && checkEl != 'exfillVal' ){
         $("#topics").hide();
     }
});

一些相当于停止传播？

Some equivalent to stop Propagation?

javascript

jquery

stoppropagation