父元素点击或者hover事件，里面某个子元素如何不触发

场景：我是在谷歌地图的时候，自定义点的样式，如果这个点的数据中符合了某项条件，需要给这个点加个超过本身图标大小的背景图。我直接加了之后，发现，原本只有图标大小的区域可以点击，现在变成整个背景图大小的区域都可以点击。

这就不太合适了，想要的效果是只有图标可以点击交互，这个背景图不可以

本来是想只给图标加点击事件，但是
1.谷歌这个Marker的点击事件api是在父元素上的。
2.多个点靠近的时候，背景图会遮挡其他点的图标

后来找到了最简单的解决办法：pointer-events: none; 

pointer-events: none; 是 CSS 中的一个属性，用于控制元素如何响应指针设备（如鼠标、触摸屏、触控笔等）的交互。

作用

当给一个元素设置 pointer-events: none; 时：

1. 该元素不会成为鼠标/指针事件的目标

2. 指针事件会"穿透"该元素，作用于该元素下方的元素

3. 该元素上的所有鼠标/指针相关事件（如 click, hover 等）都不会被触发

常见使用场景

1. 实现点击穿透：

   • 当有一个半透明覆盖层，但希望点击能穿透到下层元素时

   • 例如：模态对话框的背景遮罩层

2. 禁用交互：

   • 临时禁用某个元素的交互，而不改变其外观

   • 比 disabled 属性更灵活，可以应用于任何元素

3. 性能优化：

   • 对于复杂动画元素，可以禁用指针事件来提高性能

4. 自定义鼠标行为：

   • 创建自定义鼠标交互效果时控制事件传递

pointer-events: none; 这个css属性真的很神奇，之前确实没怎么了解过，真的很有用，学海无涯~