WAP端穿透问题和解决方法

1. 穿透问题可这么理解, 共有2种问题:
　　问题1：有A 和 B 两个弹层，B 弹层盖在A 弹层上面，B 弹层绑定 touchend 事件，当用户点击B 的时候 B隐藏，由于touchend 事件触发的太快了，导致用户点击到弹层下面的具有click 属性的元素的东东。(包括 A 标签<a href='#'></a> 或 input 框或绑定了 click 事件的元素)

　　奇怪的是, 若给链接A 绑定了touchend 并且e.preventDefault() 也是不起作用。请看下面的例子，也就是它根本没有执行 touchend 事件，但是却执行了A 元素的 href 跳转链接。

<a href='https://www.baidu.com/'></a>

<script type='text/javascript'>

  // B 是在 a 链接上面的弹层

  B.on('touchend', function(){

    B.hide();

  });

  // 大部分浏览器都不会执行 console.log，但是 ios 8.4 safari 不跳转,因为它本来就没有穿透问题。

  $('a').on('touchend', function(e){

    console.log('touchend');

    e.preventDefault();

  });

</script>

浏览器表现 :
　　ios 8.4 safari 页面不跳转
　　ios 8.4 UC 10.6.5.627 跳转
　　ios 7.0 safari 跳转
　　ios 7.0 UC 10.6.5.627 跳转
　　SAMSUNG GT-19308 4.3 UC 10.6.5.627 跳转
　　SAMSUNG GT-19308 4.3 跳转。若直接点击链接 a，竟然会跳转，e.preventDefault() 竟然没作用，只有这个浏览器会。想点击 a 链接不跳转，只能绑定 click 事件并且 e.preventDefault();

　　问题2：有A 和 B两个元素，B 元素盖在A 元素上面，B元素默认隐藏。A元素绑定事件让B 元素显示出来，B元素点击自己隐藏。出现的现象是: 点击A元素 B元素显示不出，因为触发了B元素里的代码。

A.on('touchend', function(){

  B.show();

});

// 就算B 元素用 touchend 绑定, 有的手机也还是会触发 B.hide();

B.on('click', function(){

  B.hide();

});

解决穿透问题1:

各个浏览器的表现
　　iOS 8.4 safari用touchend 关闭不会穿透下面绑定的 click 事件, 所以什么事都不用做，很完美。
　　iOS 8.4 和 iOS 7.0 UC浏览器弹窗关闭用 setTimeout(function(){ 弹层.hide() }, 0); 可以解决弹层穿透。
　　另外备注下: UC 浏览器做过优化，下面的代码 click 事件比 touchend的触发的快。

$('.m').on('touchend', function(){

    setTimeout(function(){

        console.log('touchend');

    }, 0);

});

$('.m').click(function(){

    console.log('click');

});

iOS 7.0 safari的不行，只能用 e.preventDefault() 解决或者设置 setTimeout(.. 360)，而 e.preventDefault() 也支持 ios8.4 safari和UC版本的。

Android 的手机 4.1.1 JRO03L MIUI-JLB14.0, e.preventDefault();不能解决，但是 setTiemout 只要在 >=300 就可以解决了。

所以最终的解决办法：

　　由于 iOS 7.0上 setTimeout 360毫秒的时间太长了，所以直接给 B弹层绑定 e.preventDefault();

B.on('touchend', function(e){

    e.preventDefault();

    B.hide();

});

　　Android上解决方式通过属性 pointer-events: none; 让整个页面都不能有点击的属性, 301秒以后恢复属性值。

B.on('touchend', function(){

    $('html').css({

        pointer-events: 'none'

    });

    setTimeout(function(){

        $('html').css({

            pointer-events: 'auto'

        });

    }, 301);

    B.hide();

});

解决穿透问题2:

　　解决方式比较简单, A 里面用 e.preventDefault(), 注意A也不能绑定tap; B 绑定 touchend

A.on('touchend', function(e){

    e.preventDefault();

    B.show();

});

B.on('touchend', function(){

    B.hide();

});

2. 当给一个元素绑定 touchend 事件和click事件, touchend事件让元素关闭，那么都不会触发到 click 事件，浏览器如下。
　　SAMSUNG GT-19308 4.3 原生浏览器和 UC浏览器 10.6.5.627
　　IOS7.0 safari 和 UC浏览器 10.6.5.627
　　IOS8.4 safari 和 UC浏览器 10.6.5.627

3. fastClick

通过绑定 body touchend，然后通过逻辑找到 e.target 元素，满足条件下执行 e.preventDefault(); 阻止了 click事件，然后让 initMouseEvent 和 dispatchEvent 来触发。

问题1的是否解决的浏览器兼容如下：

SAMSUNG GT-19308 4.3 和 ios8.4
　　原生浏览器和safari 可以
　　UC浏览器都可以

ios7.0 safri 和 UC浏览器都不可以

4. 注意：若给 html 根元素绑定了
$('html').on('touchend', function(){ e.preventDefault(); })
则页面里所有的元素 click 绑定的事件都触发不了, input 都不能点击输入了。

巴特西

WAP端穿透问题和解决方法

最新文章

热门文章

巴特西

WAP端 穿透问题和解决方法

最新文章

热门文章

WAP端穿透问题和解决方法