CODEWITHSUNDEEP
csshtml
xPox
xPox

Reputation: 311

Prevent clicking through div

I have a div container, which holds several "rows" of data, with each item in the list in it's own "listRow" div. I'm using jQuery to make the "listRow" divs selectable, by toggling the css styling when clicked. Also within each row is an image div that floats on the right side of it's parent "listRow" div and contains an onclick event. When I click on the image div, the onclick event fires, but the parent "listRow" div is also clicked and "selected".

How can I prevent from clicking through my image div?

pseudo html code:

<div class="listContainer">
    <div class="listRow" id="listRow1">
        <div class="listItemName">List item #1</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
    <div class="listRow" id="listRow2">
        <div class="listItemName">List item #2</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
</div>

jQuery code:

$("div.listRow").click(function(){
    $(this).toggleClass("selected");
})

Upvotes: 21

Views: 46199

Answers (5)

danday74
danday74

Reputation: 57116

Whilst the other solutions work, I've just discovered another alternative way of doing this!

If you want to block something from being clicked, you can position a disabled button on top of it. Something like this:

<div>you cannot click me because the disabled button will stop you</div>
<button disabled>you cannot click me or anything behind me</button>

button[disabled] {
  position: absolute;
  margin-top: -30px;
  margin-left: -5px;
  z-index: 1;
  margin: 0;
  border: none;
  padding: 0;
  width: 100px;
  height: 100px;
  background-color: transparent;      
}

The positioning and sizing of the button should be such that it blocks you from clicking the div.

I wouldn't use this on a regular basis, but its good to know. I found it useful when using Angular Material and whilst evt.stopPropagation nearly worked, it did not stop the mat ripple effect. But this approach did!

Upvotes: 0

Felipe Chernicharo
Felipe Chernicharo

Reputation: 4547

Use 'event.stopImmediatePropagation()'

This saved my life! Hope it can save yours too 😅

Say you have a hidden modal (a simple <div> with position: absolute and opacity: 0) that is shown depending on user action.

The problem is that when clicking upon it, other elements "behind" the modal will also be triggered.

To prevent this behavior and avoid the click event to bubble up through the DOM (and touch other elements), stopImmediatePropagation is the prefect solution!

modal.addEventListener('click', e => {
    
    e.stopImmediatePropagation()
    
   //  click logic here ...
})

This way the event will only be listened for the very element where you have attached your eventListener.

In our example case the click will now act only upon the modal and won't touch underlying elements anymore.

And of course, it works not only for 'click' events but also for all kinds of user interaction events like 'mouseover', 'mouseout', 'keydown', 'keyup' etc...

Upvotes: 0

Luca Ziegler
Luca Ziegler

Reputation: 4134

Add a event parameter to the function and the following two return lines:

$("div.listRow").click(function(e){
    if (e.target != this)
        return;
    $(this).toggleClass("selected");
});

Upvotes: 0

Don
Don

Reputation: 4167

In the click function of the image if you grab the event and use the stopPropagation() function then it should keep the event from firing the the element's parents. eg.

$('div.listItemIcon').click(function(e){
    //your code here
    e.stopPropagation();
});

Upvotes: 3

dsgriffin
dsgriffin

Reputation: 68616

You'd use event.stopPropagation():

event.stopPropagation() - Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

On the div.listItemIcon's click() event to prevent the event bubbling:

$('div.listItemIcon').click(function(e){
    e.stopPropagation();
});

$("div.listRow").click(function(){
   $(this).toggleClass("selected");
});

jsFiddle example here.

Upvotes: 29

Related Questions