How to add an onClick for a parent div and not letting its children inherit it?

Question

I'm using next js for my web application, I'm trying to set onclick for a div which has mor elements inside it. I do not want the other children elements to call the onclick function as I only want the background div to execute the function, but when I add an onlclick function to the parent.

How do I achieve this ?? Here is my code for reference :

<div onClick={()=>{
  /* trigger something */
}}>
  /* these should not trigger the above onlick */
  <div class="css-bg">
    <button></button>
  </div>
  <text>Some Sample Text</text>
</div>

See https://stackoverflow.com/questions/38861601/how-to-only-trigger-parent-click-event-when-a-child-is-clicked/38861760 — Shivam Jha, Aug 01 '21 at 18:32
Does this answer your question? [How to ONLY trigger parent click event when a child is clicked](https://stackoverflow.com/questions/38861601/how-to-only-trigger-parent-click-event-when-a-child-is-clicked) — Shivam Jha, Aug 01 '21 at 18:32
Unless you have padding on that parent element so you can separate it out from its children you are never going to be able to access it. It will always and only catch events from its children. — Andy, Aug 01 '21 at 18:45
You need to clarify if the children do occupy the whole area of the parent, or if there is really some space in between so that it is really possible to click on the parent without clicking on one of the children. If they occupy the whole area then it is not clear what you want to achieve. — t.niese, Aug 01 '21 at 18:49

Kevin Haxhi · Accepted Answer · 2021-08-01T20:26:01.507

1

I don't know if this is what you intended, but if all you want is for a clickable background div with components on top of it that don't activate the onClick event of the background, then you could separate the background div from its children, for example:

import "./styles.css";

export default function App() {
  return (
    <div className="parent-div">
      <div
        className="div-style"
        onClick={() => console.log("go to tweet page")}
      ></div>
      <a href="#tweet-author">
        <img
          className="img-style"
          src="https://www.pixsy.com/wp-content/uploads/2021/04/ben-sweet-2LowviVHZ-E-unsplash-1.jpeg"
          onClick={() => console.log("go to tweet author")}
          alt="Author"
        />
      </a>
      <h2 className="h2-style">Start editing to see some magic happen!</h2>
    </div>
  );
}

You can add styling to the div background, so it covers the whole container (or adjust the styling to match your preference, add display relative to the other elements to make them visible:

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.parent-div {
  position: relative;
  height: 200px;
  padding: 15px;
  margin: 15px;
}

.div-style {
  background: url("https://i.pinimg.com/originals/0b/1b/04/0b1b0434864a51a9e607c6241c148090.jpg");
  background-size: cover;
  background-position: center;
  position: absolute;
  border-radius: 7px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.img-style {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.h2-style {
  position: relative;
}

Let me know if this is what you intended, if not please add a comment so I can adjust my answer accordingly.

edited Aug 01 '21 at 20:26

answered Aug 01 '21 at 18:53

Kevin Haxhi

498
2
6

I want my div to behave like the twitter tweet cell. Clikcing on the div or on the tweet text brings you to the tweet page, but the profile pic will take you to the tweet author. I don't think this approach would work in this scenario. – Aadhit Shanmugam Aug 01 '21 at 19:39
@AadhitShanmugam Actually, it does work, if you add another layer to your tree, so you could add another div parent for the background and the child elements instead of the <>> that I used for the demonstration. Then you can style the new parent to look like the twitter cell you talk about. – Kevin Haxhi Aug 01 '21 at 19:48
Keep in mind that the outer div will not be clickable, it will serve just as a container for the clickable background and the elements on top of it. – Kevin Haxhi Aug 01 '21 at 19:49
Do you want my answer to demonstrate an example of that instead? – Kevin Haxhi Aug 01 '21 at 19:49
@AadhitShanmugam I don't think the type of URL has any effect on this. – Kevin Haxhi Aug 01 '21 at 20:02
I think your method may work out for me, Let me give it a shot. Thank you for the time !! – Aadhit Shanmugam Aug 01 '21 at 20:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235518/discussion-between-kevin-haxhi-and-aadhit-shanmugam). – Kevin Haxhi Aug 01 '21 at 20:13

score -1 · Answer 2 · answered Aug 01 '21 at 18:31

-1

I believe that this is not possible, because as the parent has a click event, the children as a rule will also have it. One way would be to use pointer-events to disable clicking on children, but not even that way, only on the parent.

answered Aug 01 '21 at 18:31

Lineu Pastorelli

502
1
8
20

1

The other elements don't have the listener but because of event delegation the parent catches the events as they bubble up the DOM. – Andy Aug 01 '21 at 18:39

How to add an onClick for a parent div and not letting its children inherit it?

2 Answers2