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

Question

Say I have a DOM like this:

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

I want to make all the elements inside the #root node unable to be clicked/tapped. What's the best way to do this?

Thanks,

Answer 1

You can use CSS pointer events

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

Answer 2

Add a function at click of button Function atbottonclick(){$(this).css('pointer-events','none')} But you need to prevent keyboard events also for totally disable them. So if you can disable these elements then go for it.