admin管理员组

文章数量:1640593

文章目录

  • 前言
  • 一、CSS里的pointer-events属性
  • 二、使用步骤
  • 总结

前言

html的a标签禁用问题处理

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS里的pointer-events属性

现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：

  1. 阻止用户的点击动作产生任何效果
  2. 阻止缺省鼠标指针的显示
  3. 阻止CSS里的hover和active状态的变化触发事件
  4. 阻止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的事项：

  1. 子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
  2. 如果你对一个元素设置了click事件监听器，然后你移除了pointer-events样式声明，或把它的值改变为auto，监听器会重新生效。基本上，监听器会遵守pointer-events的设定。
  3. 不要使用pointer-events来屏蔽一些十分关键的触发动作，因为这个样式可以通过浏览器控制台删除掉！

参考链接

本文标签： 标签htmldisabled

版权声明：本文标题：html的a标签disabled禁用处理 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729319601a1195718.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。