鼠标禁用样式（cursor:not-allowed）和鼠标禁用事件（pointer-events: none）

鼠标禁用样式

cursor: not-allowed;

用法：该方法只能实现样式上的不可点击，点击依然会触发相应的点击时间，这个样式主要是配合js逻辑（return）阻止事件的发生

鼠标禁用事件

pointer-events:none;

用法：该样式会阻止默认事件，但是鼠标样式会变成箭头的样子。
注意：父元素如果设置了pointer-event:none 并不意味着父元素上的事件侦听器永远不会被触发，当子元素上设置pointer-event值不是none,那么都可以通过事件传播机制来触发父元素上的事件。

---

注意：如果同时使用这两种样式，会阻止事件的触发，但鼠标并不会显示禁用的样式，而是箭头样式。
解决办法：
1.外层添加一个盒子将样式分开
外层盒子使用cursor: not-allowed;
内部盒子使用pointer-events:none;
2.就是使用cursor: not-allowed;然后执行点击事件，在点击事件中阻止触发。