Question

除.m1wrap div之外的任何地方点击时，我需要显示警告。

为什么这不起作用？即使点击.m1wrap

，也会显示提醒

$(document).on("click", function(e) {
    if (e.target.class !== "m1wrap") {
        alert ("323");
    };
})

Answer 1

在e.target中没有属性class（它返回undefined），您可以使用属性e.target.className（注意它返回class属性中的所有类），但在jQuery中有方法.hasClass。

此外，您可以使用.contains方法e.target.classList.contains('m1wrap')

使用classList

$(document).on('click', function (e) {
  if (!$(e.target).hasClass('m1wrap')) {
    console.log('not m1wrap');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m1wrap">m1wrap</div>
<p>test</p>

Answer 2

您需要使用className来解决class属性。

所以要么使用jQuery的hasClass()，要么使用vanilla JS className。

注意：此示例使用className仅检查类是否等于“m1wrap”，而不是包含“m1wrap”。< / p>

$(document).on("click", function(e) {
    if (e.target.className !== "m1wrap") {
        alert ("323");
    };
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m0wrap">m0wrap</div>
<div class="m1wrap">m1wrap</div>
<div class="m2wrap">m2wrap</div>

Answer 3

class中没有e.target，只有className可用。

代码段：

$(document).on("click", function (e) {
    if (e.target.className !== "m1wrap") {
        alert("323");
    };
})

但如果元素有多个类名，则以下代码片段是最好的方法。

$(document).on("click", function (e) {
    if (!$(e.target).hasClass('m1wrap')) {
        alert("323");
    };
})

Answer 4

Event.target返回Element，其中没有类属性。

因此，您可以使用 className 属性或 getAttribute（）方法获取Element的类名。

如果您想使用jQuery API，可以使用hasClass()方法

Answer 5

试试这个，

<div>
    <div class="m1wrap">
        Non Clickable area
    </div>
    Clickable area
    Clickable area
    Clickable areaClickable areaClickable
    Clickable areaClickable
    Clickable area
</div>

JS

$(('body')).on('click',function(e) {
 if ($(e.target).hasClass('m1wrap')) {
        return false;
    }
  alert("hello");
})

DEMO

单击除指定类之外的任何位置

5 个答案: