javascript - 如何使用父元素阻止子元素上的点击事件

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

如上,它有一个父元素和一个子元素。这种情况下,是不是可以通过父元素阻止子元素被点击,或者阻止子元素的onclick事件被触发呢?

在上述情况下,无论点击哪个按钮,都不应该生成console.log。

有一种方法可以通过添加另一个元素来覆盖父元素,但我很好奇如何仅通过父元素来防止它。

回答1

对于 vanilla JavaScript,还有一种方法可以防止子事件触发,即使它们是预先分配的。

您可以向父级添加点击事件,通过将第三个参数分配给 addEventListener 函数中的 true 和函数体中的 e.stopPropagation 来设置 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture

这将确保此事件在正常事件阶段之前触发,因此它的所有子点击事件都不会触发。它还保持按钮可点击并且不会改变它们的外观。

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>

回答2

将 CSS pointer-events: none 分配给父级,以下将针对页面上的第一个 <button>

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

使用 OP 特定布局,这将适用于所有三个 <button>

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

此外,内联 onclick 不适用于普通箭头功能,如果您确实需要使用箭头内联事件,它需要是 https://flaviocopes.com/javascript-iife/

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

真的没有必要,事实上https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these使用onevent属性或事件监听器,读取https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Eventshttps://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation

下面的示例直接显示了页面上每个 <button> 的快速方法。

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>

回答3

在前端,有一个名为“React”的库。它有一个“UseState”功能。

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

在这种情况下,您可以将变量设置为 true

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

通过单击按钮以及要禁用它的位置。放置

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

相似文章