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.touch=true;

                    this.startY=e.changedTouches[0].clientY;

                    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(!this.touch||moveY+moveX==0){ //填所需执行的语句}

    }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容