javascript - 如何使用 jQuery 禁用/启用 DOM 节点及其所有后代元素的鼠标/点击事件？

Question

假设我有一个像这样的 DOM:

<div id="root">
   <div>
     <button>Button</button>
   </div>
   <section>
     <a href="#">Link</a>
     <span onclick="alert(1);">Text</span>
   </section>
</div>

我想让#root节点内的所有元素都无法被单击/点击。最好的方法是什么？

谢谢

Answer 1

您可以使用 CSS 指针事件

#root {
    pointer-events: none;
}

<div id="root">
   <div>
     <button>Button</button>
   </div>
   <section>
     <a href="#">Link</a>
     <span onclick="alert(1);">Text</span>
   </section>
</div>