运行 jQuery 在点击功能上但不在 child

Question

我在 jQuery 变量 rangeCont 上有一个 click 事件处理程序。这是一个 <div> 有几个 children。当用户单击它时，我希望事件处理程序工作，但不希望它包含的 children 之一具有 "thumb" 的 class。

当我点击缩略图时，在控制台中 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();
});

有关详细信息，请参阅 this link。

运行 jQuery 在点击功能上但不在 child

Run jQuery on click function but not on a child

javascript

jquery

dom-events

jquery-events