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

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

见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');
    }

  });

});

最佳答案

jQuery的.hasClass()不需要您在类名称前加点。
尝试.hasClass('redsquare')。您可以阅读here。

这是fiddle。

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