Question

我有一个简单的div容器，里面有格式化的<ul><li>来显示联系信息。当您点击div时，它会转到该页面以显示其个人资料。这很好。

但是，有没有办法让checkbox仍可点击？目前，如果您点击checkbox，就好像我点击了父div一样，因此会将您重定向到页面之外。所以，我希望它能够按原样运行，但仍能够点击checkbox

我有以下模拟，CodePen

HTML

<div class="contactlist" data-token="ABCDEF">
    <ul>
        <li><input type="checkbox"></li>
        <li><img src="" alt="..." height="50" width="50" /></li>
        <li><span>Mr A Sample</span></li>
    </ul>
</div>

JS

$(".contactlist").on("click", function(e){

  var token = $(this).data('token');
  window.location.href = "contact.php?token="+token;

});

PS window.location在CodePen示例中不起作用（它们已禁用页面重定向），但这通常有效，并会重定向您。

Answer 1

事件对象具有target属性，该属性具有对事件发起元素的引用（实际单击了哪个元素）。因此，如果原始元素是复选框，那么您可以跳过其余的事件逻辑，如下所示：

// did not click on a checkbox
if(!$(e.target).is(':checkbox'))

完成JS

$('.contactlist').on('click', function(e) {  
    if(!$(e.target).is(':checkbox')) {
      var token = $(this).data('token');
      window.location.href = 'contact.php?token=' + token;
    }
});

DIV上的复选框排除点击

1 个答案: