[android浏览器]页面事件穿透问题处理_Android browser event cross issue

[hite]

问题描述；在安卓端页面如果给一个div使用overflow:auto,并设定一个固定高度，里面可以滚动的内容会发生事件穿透，点击其他区域，都会触发点击div里面的内容. rain css的select控件在弹出的选择列表里面的列表会在点击ok，cancel的时候被点击到，如图:

解决这个问题的方法是在按钮的外层div上加入一个不可见的div来挡住事件的穿透: css:

.touchWrap{margin:0;padding:0;border:none;background:rgba(255,255,255,0.01); -webkit-tap-highlight-color:rgba(0,0,0,0);top:0px;left:0px;z-index:-1;}

js:

buttonsWrap.append('<div class="touchWrap posa fullw fullh"></div>');

via raincss

另外的描述

WebApp事件穿透效应：在WebApp中，在页面转场或硬切换或弹框等界面变化的处理中，把初始界面触发界面变化事件的元素btnA相对屏幕的位置标为screenPoint，而切换的目标界面在screenPoint位置也存在一个元素btnB并绑定了事件处理，在一定情况下，当btnA被触发时，btnB也会被触发。这里将这种现象成为事件穿透效应。

说明： 1、第一位置——初始界面触发界面变化事件的元素btnA 2、第二位置——目标界面元素btnB

测试结果： 1、第一位置为touchstart/touchend事件，第二位置为touchstart/touchend事件，未触发透传 2、第一位置为touchstart/touchend事件，第二位置为click事件，触发透传 3、第一位置为touchstart/touchend事件，第二位置为Input元素，触发透传 4、第一位置为click事件，第二位置为touchstart/touchend事件，未触发透传 5、第一位置为click事件，第二位置为click事件，未触发透传

结论： 1、第一位置与第二位置使用相同类型(即：非click即touch)的事件 2、第二位置为input元素时，第一位置使用click事件

以上为初步测试结果，有待更进一步研究。 大家可以根据测试结果，修改代码并测试，如有问题，请及时反馈。

[hite]

分享一个点透问题的分析 http://www.cnblogs.com/yexiaochai/p/3462657.html#code_img_closed_95004036-ad41-4611-b990-e0e7264e3c98

解决方案可参考 zepto tap “点透”研究

或者 adamlu.com

1. Zepto穿透bug，当两个层叠加在一起时，使用zepto的tap事件时点击上面一个层时有时会触发下面层的事件，俗称“穿透”，原因是由于zepto的tap事件是绑定在document上的，解决方法是延迟一定时间处理事件或是监听touchend事件并在事件中使用preventDefault阻止冒泡，还有人提出来是使用css的pointer events来避免，当然也有一个第三方的库，实在还是不行的话就使用”click”代替“tap”有时也能解决此问题。。。

[peanuts6]

good job