ios从iframe层跳转新页⾯后再返回,出现iframe层中点击事件暂
时⽆效
因为项⽬需要做了⼀个单页⾯中有⼀个全页⾯覆盖层的效果,就是在⼀个页⾯⾥做出来好像有两个页⾯的效果。由于第⼆页⾯是作为⼀个多页的通⽤页,就采取了iframe嵌套的⽅式实现。在pc端调试的时候没有什么问题。但在苹果⼿机真机调试过程中发现从iframe层跳转到其他页⾯,再返回原先页⾯后,iframe层的点击事件失效,⽽主页⾯层的点击事件没有问题。
后⾯查了资料发现ios系统对点击事件不是那么敏感,于是将点击事件改成了触摸事件。
点击失效事件是解决了,但⼜会出现新的问题,即⽤户的上下滑动会⼀不⼩⼼就触发了触摸事件。于是再次增加补丁:利⽤touchstart 和touchend 做⼀个是否是滑动事件的判断。在touchstart 中记录下⼿指触摸的初始位置,再在touchend 的函数中,获取⼿指离开时的event.changedTouches[0].clientY和event.changedTouches[0].clientX;从⽽判断是否为滑动事件。如果初始位置X、Y数值与结束位置相同,就运⾏⽬标语句。这样⼀个利⽤滑动函数去模拟的点击事件的操作就实现了。
不多说了放代码
初始代码
<button class="go_share" :data-link_data="item.link_data" v-on:click="copy_goods">分享</button>
⼀次修改代码(如果页⾯是⼩窗⼝不需要滑动,就这样就可以了)
<button class="go_share" :data-link_data="item.link_data" @touchstart.stop.prevent="copy_goods" v-on:click="copy_goods">分享</button>
⼆次修改升级
<button class="go_share" :data-link_data="item.link_data" @touchstart="touch_start" @touchend.stop.prevent="copy_goods" v-on:click="copy_goods">分享</button>
methods:{
touch_start:function(e){
this.startY=e.changedTouches[0].clientY;
iframe嵌套页面加载慢this.startX=e.changedTouches[0].clientX;
},
copy_goods: function (event) {
moveY=event.changedTouches[0].clientY-this.startY;
moveX=event.changedTouches[0].clientX-this.startX;
if(!uch||moveY+moveX==0){ //填所需执⾏的语句}
} }
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论