看上去确实很神奇，以为会是事件冒泡代理转发之类的很难懂的概念。实际上超级简单，对某一个元素比如div采用div{pointer-events:none}即可让这个HTML元素（包括它的所有子孙元素）失去所有的事件响应。鼠标焦点会直接无视它，click、mouseover等所有事件会穿透它到达它的下一级元素.
pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。
如果这个css3属性浏览器不支持可以通过用js来扩展
实际运用：
https://www.zhangxinxu.com/study/201112/pointer-events-none.html
实现幻影功能
https://www.zhangxinxu.com/study/201112/pointer-events-a-button-disabled.html 实现a标签按钮完全禁用
总结:如果你在一个页面，有个最高的层级覆盖其他层级，但是有不影响其他层级的事件的话，那pointer-events:none这个属性就非常适合你
原文参考: https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
H5web页中由于项目需求,需要实现一个长按弹出自定义菜单供用户选择操作的功能,此功能可用jQuery的
touchstart,touchmove,touchend三个触碰事件外加时间器实现,这里就不多说了.
研究css3得出只需在需要禁止的页面中加入如下cssy样式定义
body {
-webkit-touch-callout:none/*系统默认菜单被禁用*/
-webkit-user-select:none/*webkit浏览器*/
-khtml-user-select:none/*早起浏览器*/
-moz-user-select:none/*火狐浏览器*/
-ms-user-select:none/*IE浏览器*/
user-select:none/*用户是否能够选中文本*/
}
此段css样式加入后能解决ios下手机浏览器,微信浏览器长按出现选择系统菜单问题,但是对于Android下微信浏览器还会出现不兼容问题
需在禁用页面加入一段js事件处理如下:
document.oncontextmenu=function(e){
e.preventDefault()
}
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。此处用于阻止菜单的出现.
