在前端开发中，我们有时会将某个容器设置为 pointer-events: none，以防止用户点击或滚动该容器。但是，在这种情况下，容器内的所有子元素也将继承该样式并失去鼠标事件。
那么，有没有什么方法可以让子元素恢复鼠标事件呢？答案是肯定的，本文将介绍两种常见的解决方案。
方法一：使用 pointer-events: auto
我们可以为子元素单独设置 pointer-events: auto，这将使它们忽略父级容器的 pointer-events: none 样式，并重新启用鼠标事件。
---- ---------------------- ------- ---- ---------------------- ------------------------- ------
需要注意的是，如果你想要启用子元素的鼠标事件，同时避免父级容器的事件干扰，你应该将子元素放置在父级容器之外，如下所示：
---- ---------------------- ------- ----------------------- ------ ---- ---------------------- ------- ----------------------- ------
方法二：使用 JavaScript 事件代理
如果你希望在没有改变样式的情况下也能激活子元素的鼠标事件，可以使用 JavaScript 事件代理。
事件代理允许一个父级容器监听其所有子元素上的事件，并在需要时处理它们。我们可以将子元素的鼠标事件委托给父级容器来处理，从而达到在 pointer-events: none 的情况下仍然激活子元素的目的。
---- ----------- ---------------------- ------- ---- -------------------------------- ------
----- ------ - ----------------------------------
-------------------------------- ------- -- -
-- ------------------------------------------ -
-- ----------
-
---需要注意的是，事件代理可能会对性能产生一定的影响，因此应该谨慎使用，尤其是当子元素数量非常多时。
总结
本文介绍了两种方法来使设置了 pointer-events: none 样式的父级容器内的子元素恢复鼠标事件。第一种方法是为子元素单独设置 pointer-events: auto；第二种方法是使用 JavaScript 事件代理来处理子元素的鼠标事件。在使用这些方法时，需要根据具体情况选择合适的方案，并考虑到性能等方面的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28095