使用pointer-events禁用事件触发

2019-09-0366次阅读css3


pointer-events:none使元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等),相当于<button>的disabled。使用场景如:限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)

<a class="disabled-trigger" href="https://www.xinran001.com">点我</a>
.disabled-trigger {
    padding: 0 20px;
    border-radius: 10px;
    height: 40px;
    background-color: #f60;
    pointer-events: none;
    line-height: 40px;
    color: #fff;
}

上方的a标签点击不会跳转。

上一篇: 使用attr()抓取data-*  下一篇: node mysql防止SQL注入转义查询值  

使用pointer-events禁用事件触发相关文章