首页 前端知识 鼠标禁用样式(cursor: not-allowed)无效和鼠标禁用事件(pointer-events: none)冲突

鼠标禁用样式(cursor: not-allowed)无效和鼠标禁用事件(pointer-events: none)冲突

2024-05-23 20:05:05 前端知识 前端哥 823 476 我要收藏

鼠标禁用样式:cursor: not-allowed;
鼠标禁用事件:pointer-events: none;
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向其后代元素。

如果同时使用 ,鼠标为默认样式;

cursor: not-allowed;(cursor:no-drop)
pointer-events: none;

解决方法:

  1. 外层添加盒子将样式分开
    外部盒子使用cursor: not-allowed;(cursor:no-drop)
    内部盒子使用pointer-events: none;
    在这里插入图片描述
    在这里插入图片描述

  2. 不使用鼠标禁用事件,而是在鼠标点击事件中做判断

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9125.html
标签
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!