Question

如果点击console.log，我需要.overtitle，但不包括内部的复选框。如果单击复选框，我需要选中/取消选中它，而不是console.log。

这是我尝试过的，但它不起作用。点击该复选框可触发console.log。

＆＃13;

$('.overtitle').not('.checkpart').click(function() {
  console.log('323');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overtitle'>
  <input class='checkpart' type="checkbox" name="part" value="banner00">
  BANNERS
</div>

＆＃13;

Answer 1

如果您点击该复选框，您也始终点击.overtitle。对此的一个解决方案是在event.target

的点击事件内部进行检查

＆＃13;

$('.overtitle').click(function(event){
    if(event.target.className == 'checkpart') {
        return;
    }
    console.log('323');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overtitle'>
<input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

＆＃13;

Answer 2

Theres有几种方法可以做到这一点。

首先，您可以使用e.target属性来检查实际点击了哪个元素：

＆＃13;

$('.overtitle').click(function(e) {
  if (!$(e.target).is('.checkpart')) {
    console.log('323');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overtitle">
  <input class="checkpart" type="checkbox" name="part" value="banner00"> 
  BANNERS
</div>

＆＃13;

或者，您可以在复选框上放置一个单独的事件处理程序，以阻止事件向上传播：

＆＃13;

$('.overtitle').click(function(e) {
    console.log('323');
});

$('.overtitle .checkpart').click(function(e) {
    e.stopPropagation();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overtitle">
  <input class="checkpart" type="checkbox" name="part" value="banner00"> 
  BANNERS
</div>

＆＃13;

最后，您可以将文本包装在label元素中，并仅将事件附加到该元素：

＆＃13;

$('.overtitle label').click(function(e) {
    console.log('323');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overtitle">
  <input class="checkpart" type="checkbox" name="part" id="part" value="banner00"> 
  <label for="part">BANNERS</label>
</div>

＆＃13;

Answer 3

使用event.stopPropagation()方法防止事件冒泡到DOM树的复选框。

$('.overtitle').click(function() {
  console.log('323');
}).find('.checkpart').click(function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overtitle'><input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

或者检查event.target元素（传播事件）不是复选框。

$('.overtitle').click(function(e) {
  if ($(e.target).is(':not(.checkpart)'))
    console.log('323');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overtitle'><input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

Answer 4

你必须为每个事件编写两个独立的事件处理程序，如

$(document).on('click','.overtitle',function(e) {
    console.log('323');
});

$(document).on('click','.checkpart',function(e) {
    e.stopPropagation();
});

stopPropagation()阻止执行该元素的父元素的任何事件处理程序

父元素

4 个答案: