單擊除指定類之外的任何位置

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 。

你也可以使用classList用.contains方法e.target.classList.contains('m1wrap')

 $(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”。

 $(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

e.target沒有class ，只有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 ，它沒有class屬性。

因此，您可以使用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