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事件

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

posted @ 2012-12-15 15:35  plums  阅读(1953)  评论(0编辑  收藏  举报