在单击功能上运行 jQuery，但不在子项上运行

Question

我click在 jQuery 变量上有一个事件处理程序rangeCont。这是一个<div>带几个孩子的。当用户单击它时，我希望事件处理程序可以工作，但不能为它包含的其中一个具有“拇指”类的子级工作。当我单击拇指时，控制台e.target中的span.thumb. 请问:not条件不是在选择工作还是我做错了什么？const rangeCont = $('<div class="range-slider"></div>'),  track = $('<span class="track">track</span>');progressTrack = $('<span class="progress-track">progress</span>'),  thumbHigh = $('<span class="thumb">thumb</span>');rangeCont.append(track);progressTrack.append(thumbHigh);rangeCont.append(progressTrack);$('body').append(rangeCont);rangeCont.on('click', ':not(.thumb)', function(e) {  console.log(e.target);});span {  margin: 0 1em;  background-color: rgba(0, 0, 0, 0.2);}.range-slider {  background-color: rgba(0, 0, 0, 0.2);  padding: 1em 0;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>编辑：引号对:not. 我注意到e.target是span.thumb，但e.currentTarget是span.progress-track这是拇指下方，如果这是非常重要的。

Answer 1

您可以直接检查事件的 e.target 并添加一个条件，以确保点击是在正确的目标上。

该事件仍将被引发，但您可以在不触及传播的情况下取消它。

$('#rangeCont').on('click', function(e) {

    if ($(e.target).is('.thumb'))

        return;

    console.log(e.target);

});

Answer 2

停止使用stopPropagation. 使用下面的代码

$(".range-container .thumb").on('click', function(e){

   event.stopPropagation();

});