【CSS】css控制鼠标点击事件(pointer-events)

微信订阅号:Rabbit_svip


pointer-events 是CSS3的一个属性,支持的值非常多,其中大部分都是和SVG有关。对于前端日常开发而言,只要了解 none 这个值就已经够我们玩一段时间了。

pointer-events: none;
意思就是让鼠标事件失效(链接、点击等事件)。




常用场合:获取验证码


微信订阅号:Rabbit_svip

给 <a> 标签定义一个 id=”btn”,然后通过 JS 控制 <a> 标签,点击之后模拟发送验证码,并让 <a> 标签添加一个定义好的 disable 样式。

最后设置2秒内不能再点击发送二维码请求。


微信订阅号:Rabbit_svip

可以看到上图效果。
第一次点击“发送验证码”按钮,控制台上有输出的,点击之后,按钮加了 pointer-events: none;,然后再按就没效果了,同时鼠标在按钮上也不会变成“一只手”。

除次之外,pointer-events: none; 还可以禁止 标签的页面跳转。




注意点:

  1. pointer-events 的值为 none 时,如果元素上绝对定位,那在它下一层的元素可以被选中。
  2. pointer-events: none; 只是用来禁用鼠标的事件,通过其他方式绑定的事件还是会触发的,比如键盘事件等。
  3. 如果将一个元素的子元素 pointer-events 设置成其他值(比如:auto),那么当点击子元素时,还是会通过事件冒泡的形式出发父元素的事件。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,736评论 1 45
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,538评论 1 11
  • 移动页面点击穿透问题解决方案 一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double t...
    程序员之路阅读 3,850评论 0 2
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,598评论 0 106
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92