touchend - 如何解决ios下html5网页里重叠元素的误点问题？

Question

如图所示，有两个p弹窗（蓝色弹窗A，黑色弹窗B）的关闭按钮在几乎相同的位置（显示区域重叠一部分），关闭按钮都绑定的touchend事件。

问题现象：当点击蓝色弹窗A的关闭按钮后，窗口正常关闭，但同时黑色弹窗B的关闭按钮也接受到了事件。所以同时触发了两个弹窗的关闭。

目前我的临时解决方案时，蓝色弹窗A的关闭按钮绑定的事件加个setTimeout(func, 300)做延时。300ms以后再执行关闭弹窗操作，这样能避免黑色弹窗B的按钮被点到（经测试，延时必须大点，小于300ms几乎都无法阻止）。这样虽然能避免，但是体验不太好，让人感觉界面慢很多了。

请较大家有没有更好的解决方案？

Answer 1

Just stop the click event of the blue pop-up window close button from bubbling up.

If you are using jquery, you can refer to the following code:

$("#blue-close").click(function(event){  
    // do some thing...
    event.stopPropagation();
    // 或者使用 return false;  
});