鼠标禁用样式(cursor:not-allowed)和鼠标禁用事件(pointer-events: none)
注意:父元素如果设置了pointer-event:none 并不意味着父元素上的事件侦听器永远不会被触发,当子元素上设置pointer-event值不是none,那么都可以通过事件传播机制来触发父元素上的事件。用法:该方法只能实现样式上的不可点击,点击依然会触发相应的点击时间,这个样式主要是配合js逻辑(return)阻止事件的发生。注意:如果同时使用这两种样式,会阻止事件的触发,但鼠标并不会显示
·
鼠标禁用样式
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;然后执行点击事件,在点击事件中阻止触发。
更多推荐
所有评论(0)