CODEWITHSUNDEEP
jquery
StudioTime
StudioTime

Reputation: 24019

Exclude a class within a clickable class

I have the following structure (.holder has a 40px padding so lots of room around element .classA):

<div class="holder">
  <a href="/path/to/file.html" class="classA">Hello</div>
</div>

When a user clicks on .holder something happens, but I want to stop that click from firing if the user clicks element .classA

This is what I currently use, but I want to say when .holder is clicked but not .classA

$(document).on('click', '.holder', function() {
  modClose();
});

Is that possible?

Upvotes: 0

Views: 54

Answers (4)

Jason P
Jason P

Reputation: 27022

You can check the target of the event:

http://jsfiddle.net/KwcAj/

$(document).on('click', '.holder', function(e) {
  if (e.target != this) { 
    console.log('stop');
    return;
  }       
  console.log('go');
});

Upvotes: 1

Anton
Anton

Reputation: 32591

You can check targets className

$(document).on('click', '.holder', function (e) {
  if (e.target.className.indexOf('classA') == -1) {
    modClose();
  }
});

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74410

Another way, although similar:

$(document).on('click', '.holder', function(e) {
        if($(e.target).hasClass('classA')) return;
        modClose();
    });

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123438

Just stop the event propagation when .classA is clicked:

$('.classA').on('click', function(evt) {
    evt.stopPropagation()
});

$(document).on('click', '.holder', function() {
    modClose();
});

From jQuery documentation about stopPropagation:

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Upvotes: 4

Related Questions