BAE WebApp开发 [3]——WebApp事件穿透效应研究

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

场景：

<div ontouchstart="$('#screenA').hide();$('#screenB').show();">btnA</div>
<div onclick="$('#screenB').hide();$('#screenA').show();">btnB</div>

在以上代码中，为btnA绑定touch事件，btnB绑定click事件。

当点击按钮btnA时，切换到screenB后，按钮btnB也接收到点击事件，页面又切换回screenA，造成了事件穿透。

 

说明：
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事件

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

转载于:https://www.cnblogs.com/plums/archive/2012/12/15/webapp-events-penetration-effect.html