ios從iframe層跳轉(zhuǎn)新頁面后再返回欢唾,出現(xiàn)iframe層中點擊事件暫時無效

? ? ? ?因為項目需要做了一個單頁面中有一個全頁面覆蓋層的效果,就是在一個頁面里做出來好像有兩個頁面的效果熊锭。由于第二頁面是作為一個多頁的通用頁弧轧,就采取了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í)行的語句}

????}

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市你虹,隨后出現(xiàn)的幾起案子绘搞,更是在濱河造成了極大的恐慌,老刑警劉巖傅物,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件夯辖,死亡現(xiàn)場離奇詭異,居然都是意外死亡董饰,警方通過查閱死者的電腦和手機蒿褂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尖阔,“玉大人贮缅,你說我怎么就攤上這事榨咐〗槿矗” “怎么了?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵块茁,是天一觀的道長齿坷。 經(jīng)常有香客問我,道長数焊,這世上最難降的妖魔是什么永淌? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮佩耳,結(jié)果婚禮上遂蛀,老公的妹妹穿的比我還像新娘。我一直安慰自己干厚,他們只是感情好李滴,可當(dāng)我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布螃宙。 她就那樣靜靜地躺著,像睡著了一般所坯。 火紅的嫁衣襯著肌膚如雪谆扎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天芹助,我揣著相機與錄音堂湖,去河邊找鬼。 笑死状土,一個胖子當(dāng)著我的面吹牛无蜂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蒙谓,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼酱讶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了彼乌?” 一聲冷哼從身側(cè)響起泻肯,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎慰照,沒想到半個月后灶挟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡毒租,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年稚铣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片墅垮。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡惕医,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出算色,到底是詐尸還是另有隱情抬伺,我是刑警寧澤,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布灾梦,位于F島的核電站峡钓,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏若河。R本人自食惡果不足惜能岩,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望萧福。 院中可真熱鬧拉鹃,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至煌寇,卻和暖如春焕蹄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背阀溶。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工腻脏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人银锻。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓永品,卻偏偏與公主長得像,于是被迫代替她去往敵國和親击纬。 傳聞我的和親對象是個殘疾皇子鼎姐,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,494評論 2 348

推薦閱讀更多精彩內(nèi)容