JAVA高级面试进阶训练营视频教程

admin

在做移动端的页面时，经常会遇到点击（touch）一个弹出的层，在上面触发点击（touch）事件，当弹出层关闭之后点击（touch）事件会穿透到下面的层，这时候如果下一层的某个元素也绑定了点击（touch）事件，就会也一起被触发，如何解决这所谓的bug？解决这一问题需要用到css3的新属性，pointer-events，下面先看一下他的属性设置值，可以在下面层绑定点击（touch）事件添加这一css3属性，在弹出层消失的时候设置一个setTimeout延迟时间（500ms），之后再把这一属性值移除。

关于这一新属性，具体也可以查阅http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

语法：

pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

auto：与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同

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

说明：

设置或检索在何时成为属性事件的target。

• 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
• 对应的脚本特性为pointerEvents。