如何选择一个类但不选择其内部元素？

Question

Say I have

<div id="mydiv">
  <div class="myclass">
       <span class="otherclass"></span>
       and many other classes...
  </div>
</div>

I want to capture the click event on .mydiv but not inside .myclass.

I tried .mydiv:not(.myclass) but it doesn't seem to work. I think it's because I might be clicking on the otherclass so the :not(.myclass) is not working. How can I get the area I want to get? Thanks!

Answer 1

make #mydiv clickable, do whatever you wish, and stop event propagation from .myclass , so the event will not bubbleup from myclass to mydiv

     $('#mydiv').click(function(){
        // do anything
     })

    // stop event propagation
     $('.myclass').click(function(e){
        e.stopPropagation();
        })

Answer 2

You can click on mydiv id and write your code in that function and on .myclass click event you simply write return false to stop further execution of function.

$('#mydiv').click(function(){
    // stuff your code here
});

//Use `return false` instead of `e.stopPropagation();`
$('.myclass').click(function(e){
  return false;
})

e.stopPropagation() is dangerous please read Documentation

Answer 3

Calling .off() will remove an event handler

    $("#mydiv").on('click', function () {
        alert("You clicked mydiv");
    });

    $(".myclass").off('click', function () {
    });
           or like this

   $(".myclass").off();

JS FIDDLE