I need to show an alert if there is a click anywhere except on .m1wrap div.

Why this doesn't work? Alert appears even if I click on .m1wrap

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

I need to show an alert if there is a click anywhere except on .m1wrap div.

Why this doesn't work? Alert appears even if I click on .m1wrap

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

• javascript
• jquery

• if (!$(e.target).hasClass('m1wrap') – Tushar Commented Dec 9, 2015 at 10:47
• @Tushar, what if exceptions divs are .m1wrap and all its children`, pls ? – qadenza Commented Dec 9, 2015 at 10:51
• Elements can have multiple classes – Oli Beatson Commented Dec 9, 2015 at 10:52
• @Tushar Correct me if I'm woring. This would work for the children elements too. So don't worry about it. – Amit Singh Commented Dec 9, 2015 at 11:00
• @bonaca You can use $(e.target).is('.m1wrap') – Tushar Commented Dec 9, 2015 at 11:11

5 Answers 5

In e.target there is no property class (it returns undefined), you can use property e.target.className (Note it returns all classes from class attribute), however in jQuery there is method .hasClass .

Also you can use classList with .contains method e.target.classList.contains('m1wrap')

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

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

You need to use className to address the class attribute.

So either use jQuery's hasClass() or vanilla JS className.

Note: This example using className is only checking if the class does not equal "m1wrap", rather than does not contain "m1wrap".

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

<script src="https://ajax.googleapis./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>

There is no class in e.target, only className is available.

Code snippets:

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

But the following code snippets is the best way if there is multiple class names for an element.

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

Event.target returns Element, which has not class property.

So you can use className property or getAttribute() method to get Element's class name.

If you want to use jQuery API, you can use hasClass() method

Try this,

<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