Question

我希望能够区分用户是否单击了具有某个类的元素（或该类的子元素，例如段落），或者用户是否单击了页面中的任何其他位置。我使用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');
    }

  });

});

Answer 1

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

这是fiddle。

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

Answer 2

您可以使用此代码：

以下是工作演示：https://output.jsbin.com/xobafah

https://jsbin.com/xobafah/edit?html,css,js

<强> HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="redsquare">red square</div>
<div class="redsquare">red square</div>
</body>
</html>

<强>的JavaScript

$(function() {

    $(document).mouseup(function(e) 
    {
        var container = $(".redsquare");
        // if the target of the click isn't the container nor a descendant of the container
        if (!container.is(e.target) && container.has(e.target).length === 0) 
        {
            console.log('target is outside red square');
        }
        else{
            console.log('target is red square');
        }
    });

});

Answer 3

使用event.target.className获取类名。

$(function() {

  window.addEventListener('mouseup', function(event) {
    if (event.target.className != 'redsquare') {

      console.log('target is outside red square');
    } else {
      console.log('target is red square');
    }
  });

});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="redsquare">red square</div>
<div class="redsquare">red square</div>

Answer 4

删除类名中的点，它将按预期工作：

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

  });

});

https://jsfiddle.net/bzp0ef9k/1/

事件侦听器，用于确定单击的目标是否是特定类的元素

4 个答案: