在单击功能上运行 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) {&nbsp; &nbsp; if ($(e.target).is('.thumb'))&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; console.log(e.target);});

Answer 2

停止使用stopPropagation. 使用下面的代码$(".range-container .thumb").on('click', function(e){&nbsp; &nbsp;event.stopPropagation();});