时间戳

首页 > 解决方案 > 在点击功能上运行 jQuery，但不在孩子上运行

javascript - 在点击功能上运行 jQuery，但不在孩子上运行

问题描述

我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.targetis span.thumbbut e.currentTargetisspan.progress-track在拇指下方，如果这很重要的话。

标签： javascriptjquerydom-eventsjquery-events

解决方案

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

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

$('#rangeCont').on('click', function(e) {
    if ($(e.target).is('.thumb'))
        return;

    console.log(e.target);
});

推荐阅读