鼠标禁用样式（cursor:not-allowed）和鼠标禁用事件（pointer-events: none)
·
原理
1、 鼠标禁用样式
cursor: not-allowed;
该方法只能实现样式上的不可点击，点击依然会触发相应的点击事件。
2、鼠标禁用事件
pointer-events: none;
该样式会阻止默认事件，但是鼠标样式会变成箭头的样子。
解决方法
解决办法1
外层添加一个盒子将样式分开：
外层盒子使用cursor: not-allowed;
内部盒子使用pointer-events:none;
<div class="right_bottom_disable" v-if="a100pObj.ifBuy == 4">
<div>已参加</div>
</div>
.right_bottom_disable {
width: 275px;
height: 34px;
line-height: 34px;
background: #9BC3FF;
font-size: 16px;
color: #FFFFFF;
text-align: center;
cursor: not-allowed;
div {
pointer-events: none;
}
}
解决办法2
使用cursor: not-allowed;然后执行点击事件，在点击事件中阻止触发。
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)