javascript - 事件监听器以确定单击的目标是否是特定类的元素

Question

我希望能够区分用户是否单击了具有特定类的元素(或该类的子元素，例如段落)，或者用户是否单击了页面中的其他任何位置。我使用 jQuery 来查看事件目标是否是特定类的元素，但由于某种原因这不起作用。单击元素时它不会注册。你能看出问题出在哪里吗？ (在浏览器检查器中查看控制台日志消息)

参见 Fiddle

这是 fiddle 中的代码:

HTML:

<div class="redsquare"><p>red square</p></div>
<div class="redsquare"><p>red square</p></div>

CSS

.redsquare {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 10px;
}

Javascript:

$(function() {

  window.addEventListener('mouseup', function(event) {

    if (!$(event.target).hasClass('.redsquare') && !$(event.target.parentNode).hasClass('.redsquare')) {

      console.log('target is outside red square');
    } else {
      console.log('target is red square');
    }

  });

});

Answer 1

jQuery 的 .hasClass() 不要求您在类名前加一个点。 试试 .hasClass('redsquare')。你可以阅读它here .

这是一个 fiddle .

此外，检查元素是否具有该类并将其他情况留在 else block 中会更直接。