CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TCGM
TCGM

Reputation: 1

How can I exclude an element class from being a target in jquery .click() event?

I've searched around the net for an answer to this, but no cigar, so here is my issue.

I have two HTML divs; both contained in a wrapper div, but one has z-index:101 in it's CSS, along with width and height 100%. This, naturally, places it "over" (z-index wise) the other div, .object, when a jquery click event is fired. This causes this overlay div to be the click's e.target, but I need to have the .object class be the target. Thus, it is possible (and if so, how) to exclude an HTML element from a jquery click event?

For reference, the jquery click event code I'm using:

$(document).click(function(e) {
            if(e.target.parentNode.parentNode.classList.contains("object")) {
                globalSelected.classList.remove('selected') ;
                globalSelected=e.target.parentNode.parentNode;
                globalSelected.classList.add('selected') ;
            } else {
                globalSelected.classList.remove('selected') ;
                globalSelected=null;
            }
});

Upvotes: 0

Views: 621

Answers (2)

TCGM
TCGM

Reputation: 1

I actually found the solution to my own question mere minutes after posting the question, despite having googled for hours beforehand. I merely needed to add pointer-events:none; to the CSS of the overlay.

Upvotes: 0

Brandon Poe
Brandon Poe

Reputation: 481

$('.overlay').on('click', function() {
  $(this).siblings('.object').trigger('click');
});

Without more context, I'm not sure if this will cause any undesirable side-effects.

Upvotes: 1

Related Questions