html中如何设置不可点击-木庄网络博客

2022-04-06 08:59:05 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

在html中，可以利用pointer-events属性，通过设置元素的鼠标事件失效来实现元素不可点击效果，只需要给元素设置“pointer-events:none;”样式即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html设置不可点击

通过设置元素的pointer-events属性设置为none，来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击。

css代码：

.disable {
    pointer-events: none;
}

示例：

const disabled = true;
<Button className={disabled ? 'disabled' : null}>点击</Button><style>
  .disabled {
      pointer-events: none;
      // 设置pointer-events: none;再设置cursor是没有效果的
  }</style>

效果图：

阅读剩余部分

相关阅读 >>

在css中怎样添加脚注

向Html中插入视频并兼容所有浏览器的方法

Html button标签是否有超链接？这有button标签设置超链接的实例

css怎么选择父元素

css怎么使用display显示隐藏元素

vue的源码解析（代码示例）

更多相关阅读请进入《Html》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » html中如何设置不可点击

html中如何设置不可点击

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论