排除可点击类中的类

Question

我有以下结构（.holder有40px填充，因此元素.classA周围有很多空间）：

<div class="holder">
  <a href="/path/to/file.html" class="classA">Hello</div>
</div>

当用户点击.holder时会发生某些事情，但如果用户点击元素.classA

，我想停止点击

这是我目前使用的内容，但我想说点击.holder但不是.classA

$(document).on('click', '.holder', function() {
  modClose();
});

这可能吗？

Answer 1

单击.classA时停止事件传播：

$('.classA').on('click', function(evt) {
    evt.stopPropagation()
});

$(document).on('click', '.holder', function() {
    modClose();
});

关于stopPropagation的jQuery文档：

  

描述：防止事件冒泡DOM树，防止任何父处理程序收到事件通知。

Answer 2

另一种方式，虽然相似：

$(document).on('click', '.holder', function(e) {
        if($(e.target).hasClass('classA')) return;
        modClose();
    });

Answer 3

您可以查看活动的target：

http://jsfiddle.net/KwcAj/

$(document).on('click', '.holder', function(e) {
  if (e.target != this) { 
    console.log('stop');
    return;
  }       
  console.log('go');
});

Answer 4

您可以检查目标className

$(document).on('click', '.holder', function (e) {
  if (e.target.className.indexOf('classA') == -1) {
    modClose();
  }
});