Disable onclick event on div behind image

Question

I have an element that looks like this:

There is an onclick event on the section area and one on the cross.

<div onclick="sectionClicked()"> 

     .....

   <div class="section_delete" onclick="deleteSection()">
       <img src=".../delete-section.png" />
   </div>
</div>

CSS to position the cross

.section_delete {
    display: block;
    position: absolute;
    top: -10px;
    right: -5px;
}

However, when I click on the cross, both deleteSection and sectionClicked functions are fired.

How do I prevent the sectionClicked function from being fired when then cross is clicked?

What is very strange is that if I click on the very outside of the cross, so that I am certainly not clicking on the section area, the same thing is happening.

Did you try `z-index`? – Suboptimierer Dec 29 '22 at 16:48 — Suboptimierer, Dec 29 '22 at 16:48
@Suboptimierer Yes - tried that but still fires – RGriffiths Dec 29 '22 at 16:52 — RGriffiths, Dec 29 '22 at 16:52

Sabbir Alam Pran · Answer 1 · 2022-12-29T17:35:59.177

1

I think you better wrap both in another div. Make the fist div's position relative. As the cross is inside the div, so its an element under it. So it will fire all over its element. I have attached the code below. Hope this might help you. Here assume red colored div as the cross icon.

function sectionClicked(){
  console.log("Hi I'm yellow div");
}

function deleteSection(){
  console.log("Hi I'm red div");
}

.section_delete{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

<div style="position: relative">
  <div style="height: 150px; background-color: yellow"                 onclick="sectionClicked()"> 
<p style="text-align:center"> Click Me </p>
  </div>
  <div style="background-color: red"                class="section_delete" onclick="deleteSection()">
<p> Click Me </p>
  </div>
</div>

edited Dec 29 '22 at 17:35

answered Dec 29 '22 at 17:15

Sabbir Alam Pran

181
6

I just tried to demonstrate his section area behind the cross icon. Yellow div and red div have separate click event. Both wont be fired now. – Sabbir Alam Pran Dec 29 '22 at 17:22
Ok I got it. As div is a block element, Height will do the duty. Thank you for the correction. – Sabbir Alam Pran Dec 29 '22 at 17:37

Roko C. Buljan · Answer 2 · 2022-12-29T17:42:46.840

The visual position of the cross icon does not matter, what matters is the icon's ancestry in the DOM and that's the way events propagate, bubble
never use Event.stopPropagation() (even if seemingly a quick fix) unless you really, really know what you're doing (and this is not such case). An app and all its components both yours or third-party should always be notified and able to intercept events occurring during their lifetime - in their environment.
stop using inline HTML on* handlers. JavaScript is supposed to be in one place only and that's its respective tag or file

Instead

delegate events on the parent element (or even better on a static common parent if you have any), and use Event.target in combination with .closest() to determine the clicked element:

document.querySelectorAll(".section").forEach((elSection) => {

  elSection.addEventListener("click", (evt) => {
  
    // Delete button was clicked:
    if (evt.target.closest(".section_delete")) {
      console.log("Delete button clicked");
      elSection.remove();
    }
    
    // Section was clicked:
    else {
      console.log("Section clicked");
      elSection.classList.toggle("is-done");
    }
    
    // Section or any other child element was clicked:
    // ...
    
  });


});

.section {
  position: relative;
  background: #eee;
  padding: 1rem;
  margin: 1rem;
}

.section_delete {
  display: block;
  position: absolute;
  top: -10px;
  right: -5px;
}

.is-done {
  background: hsl(100, 80%, 80%);
}

<div class="section">
  Lorem ipsum
  <button type="button" class="section_delete">&times;</button>
</div>

<div class="section">
  Dolor sit amet
  <button type="button" class="section_delete">&times;</button>
</div>

<div class="section">
  Adipiscing consectetur elit
  <button type="button" class="section_delete">&times;</button>
</div>

For a better understanding read: events for dynamic child elements

Additionally

Don't use DIV when in need for <button>. Markup semantics matter.

score -1 · Answer 3 · answered Dec 29 '22 at 17:07

-1

if you specify the event in the onclick:

<div class="section_delete" onclick="deleteSection(event)">
  <img src=".../delete-section.png" />
</div>

Then you can stop the event propagating:

deleteSection = ev =>{
  ev.stopPropagation();
  ...
}

answered Dec 29 '22 at 17:07

jet_24

598
3
8

Don't. Just don't (unless you know *exactly* what you're doing) use or suggest to use Event.stopPropagation(). An application and its layers should **always** be notified about ongoing events. – Roko C. Buljan Dec 29 '22 at 17:09

Disable onclick event on div behind image

3 Answers3