admin管理员组文章数量:1640618
文章目录
- 前言
- 一、CSS里的pointer-events属性
- 二、使用步骤
- 总结
前言
html的a标签禁用问题处理
提示:以下是本篇文章正文内容,下面案例可供参考
一、CSS里的pointer-events属性
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript,它能够:
- 阻止用户的点击动作产生任何效果
- 阻止缺省鼠标指针的显示
- 阻止CSS里的hover和active状态的变化触发事件
- 阻止JavaScript点击动作触发的事件
二、使用步骤
代码如下(示例):
<html>
<body>
<a href="http://www.w3school" class="disabled">W3School</a>
</body>
</html>
<style>
a.disabled {
pointer-events: none;
filter: alpha(opacity=50); /*IE滤镜,透明度50%*/
-moz-opacity: 0.5; /*Firefox私有,透明度50%*/
opacity: 0.5; /*其他,透明度50%*/
}
</style>
总结
这个pointer-events属性有很多可以使用的属性值,但大部分都是针对SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。
其中none值能阻止点击、状态变化和鼠标指针变化
一些需要注意的关于pointer-events的事项:
- 子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
- 如果你对一个元素设置了click事件监听器,然后你移除了pointer-events样式声明,或把它的值改变为auto,监听器会重新生效。基本上,监听器会遵守pointer-events的设定。
- 不要使用pointer-events来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉!
参考链接
版权声明:本文标题:html的a标签disabled禁用处理 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729319601a1195718.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论