⽤纯CSS禁⽌⿏标点击事件
JavaScript有⼀个preventDefault⽅法, 他可⽤以来取消事件的默认动作。⽐如取消打开链接，选择⽂本或拖放等。
event.preventDefault()
该⽅法将通知 Web 浏览器不要执⾏与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调⽤任意的事件句柄，通过调⽤该⽅法，可以阻⽌提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻⽌默认动作。⽆论哪种情况，调⽤该⽅法都没有作⽤。
这种⽅法可以阻⽌当前元素的浏览器默认⾏为，但并不阻⽌事件被⽗级及document响应。如果想彻底取消事件，则可使⽤stopPropagation
event.stopPropagation()
该⽅法将停⽌事件的传播，阻⽌它被分派到其他 Document 节点。在事件传播的任何阶段都可以调⽤它。注意，虽然该⽅法不能阻⽌同⼀个Document 节点上的其他事件句柄被调⽤，但是它可以阻⽌把事件分派到其他节点。
这两种是在JS中的常⽤取消事件的⽅法，但是其实还有⼀种⽤纯css就能实现取消事件响应的⽅法，pointer-events，使⽤起来更加简单，它可以：
1 阻⽌⽤户的点击动作产⽣任何效果
2 阻⽌缺省⿏标指针的显⽰
css鼠标点击样式
3 阻⽌CSS⾥的hover和active状态的变化触发事件
4 阻⽌JavaScript点击动作触发的事件
⽐如以下CSS就顺起到将禁⽤的按钮灰掉的效果
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
这种⽅法明显⽐js代码更加灵活，可惜ie9不⽀持

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。