? ? ? ?因為項目需要做了一個單頁面中有一個全頁面覆蓋層的效果,就是在一個頁面里做出來好像有兩個頁面的效果熊锭。由于第二頁面是作為一個多頁的通用頁弧轧,就采取了iframe嵌套的方式實現(xiàn)。在pc端調(diào)試的時候沒有什么問題碗殷。但在蘋果手機真機調(diào)試過程中發(fā)現(xiàn)從iframe層跳轉(zhuǎn)到其他頁面精绎,再返回原先頁面后,iframe層的點擊事件失效亿扁,而主頁面層的點擊事件沒有問題捺典。
后面查了資料發(fā)現(xiàn)ios系統(tǒng)對點擊事件不是那么敏感,于是將點擊事件改成了觸摸事件从祝。
點擊失效事件是解決了襟己,但又會出現(xiàn)新的問題引谜,即用戶的上下滑動會一不小心就觸發(fā)了觸摸事件。于是再次增加補肚嬖 :利用touchstart 和touchend 做一個是否是滑動事件的判斷员咽。在touchstart 中記錄下手指觸摸的初始位置,再在touchend 的函數(shù)中贮预,獲取手指離開時的event.changedTouches[0].clientY和event.changedTouches[0].clientX贝室;從而判斷是否為滑動事件。如果初始位置X仿吞、Y數(shù)值與結(jié)束位置相同滑频,就運行目標(biāo)語句。這樣一個利用滑動函數(shù)去模擬的點擊事件的操作就實現(xiàn)了唤冈。
不多說了放代碼
初始代碼
<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){ //填所需執(zhí)行的語句}
????}
}