How to block click event on child element using parent element-CodePudding

    <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.

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>