How to block click event on child element using parent element

Question

    <div id="parent">
      <div>
         <button onClick={() => console.log("a")}>a</button>
      </div>
      <button onClick={() => console.log("b")}>b</button>
      <button onClick={() => console.log("c")}>c</button>
    </div>

As above, it has a parent element and a child element. In this situation, is it possible to prevent the child element from being clicked through the parent element, or to prevent the child element's onclick event from being fired?

In the above situation, console.log should not be generated no matter which button is clicked.

There is a way to cover the parent element by adding another element, but I'm curious how to prevent it through only the parent element.

Hao Wu · Accepted Answer · 2022-05-19 01:47:47Z

2

For vanilla JavaScript, there's also a way to prevent the child events from triggering even they're assigned beforehand.

You may add a click event to the parent, set useCapture by assigning the third parameter to true in the addEventListener function and then e.stopPropagation in the function body.

This will make sure this event triggers before normal event phases, so all its child click events will not trigger. It also keeps the buttons clickable and will not alter their appearance.

document.querySelector('#parent').addEventListener('click', e => e.stopPropagation(), true);

<div id="parent">
  <div>
     <button onclick="console.log('a')">a</button>
  </div>
  <button onclick="console.log('b')">b</button>
  <button onclick="console.log('c')">c</button>
</div>

answered May 19, 2022 at 1:47

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zer00ne · Accepted Answer · 2022-05-19 01:21:04Z

1

Assign CSS pointer-events: none to the parent, the following will target the first <button> on the page:

document.querySelector('button').parentElement.style='pointer-events:none'

With the OP specific layout this will work for all three <button>:

document.getElementById('parent').style='pointer-events: none'

Also, the inline onclick doesn't work with normal arrow functions, if you really need to use arrow inline event, it needs to be an iife:

<button onclick="(() => console.log('b')()">

There's really no need to so, in fact inline event handlers are garbage use onevent properties or event listeners, read on events and event delegation.

The example below shows a quick way for every <button> on the page directly.

document.querySelectorAll('button').forEach(btn => btn.style='pointer-events:none');

<div id="parent">
      <div>
         <button onClick='console.log("a")'>a</button>
      </div>
      <button onClick='console.log("b")'>b</button>
      <button onClick='console.log("c")'>c</button>
    </div>

edited May 19, 2022 at 1:21

answered May 19, 2022 at 1:01

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

1 Comment

Hao Wu Over a year ago

I think the OP is using React but not native inline event.

Dogl4 · Accepted Answer · 2022-05-19 00:54:15Z

0

On the front-end, there is a library called "React". It has a "UseState" function.

const [disabled, setDisabled] = useState(false);

In this case, you can set the variable to true

<button onClick={() => setDisabled(true)}>a</button>

By clicking on the button and where you want to disable it. to place

<button disabled={ disabled } onClick={() => console.log("b")}>b</button>

answered May 19, 2022 at 0:54

Dogl4

1

Collectives™ on Stack Overflow

How to block click event on child element using parent element

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related