資訊專欄INFORMATION COLUMN
摘要：移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下實(shí)現(xiàn)的源碼。點(diǎn)透是什么你可能碰到過在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)閉的按鈕，你點(diǎn)了這個(gè)按鈕關(guān)閉彈出層后后，這個(gè)按鈕正下方的內(nèi)容也會(huì)執(zhí)行點(diǎn)擊事件或打開鏈接。這個(gè)被定義為這是一個(gè)點(diǎn)透現(xiàn)象。
移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下zepto實(shí)現(xiàn)tap的源碼。
1、“點(diǎn)透”是什么你可能碰到過在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)閉的按鈕，你點(diǎn)了這個(gè)按鈕關(guān)閉彈出層后后，這個(gè)按鈕正下方的內(nèi)容也會(huì)執(zhí)行點(diǎn)擊事件（或打開鏈接）。這個(gè)被定義為這是一個(gè)“點(diǎn)透”現(xiàn)象。
2.為什么會(huì)出現(xiàn)點(diǎn)透zepto的tap通過兼聽綁定在document上的touch事件來完成tap事件的模擬的,及tap事件是冒泡到document上觸發(fā)的
再點(diǎn)擊完成時(shí)的tap事件(touchstarttouchend)需要冒泡到document上才會(huì)觸發(fā)，而在冒泡到document之前，用戶手的接觸屏幕(touchstart)和離開屏幕(touchend)是會(huì)觸發(fā)click事件的,因?yàn)閏lick事件有延遲觸發(fā)(這就是為什么移動(dòng)端不用click而用tap的原因)(大概是300ms,為了實(shí)現(xiàn)safari的雙擊事件的設(shè)計(jì))，
所以在執(zhí)行完tap事件之后，彈出來的選擇組件馬上就隱藏了，此時(shí)click事件還在延遲的300ms之中，當(dāng)300ms到來的時(shí)候，click到的其實(shí)不是完成而是隱藏之后的下方的元素，如果正下方的元素綁定的有click事件此時(shí)便會(huì)觸發(fā)，如果沒有綁定click事件的話就當(dāng)沒click，但是正下方的是input輸入框(或者select選擇框或者單選復(fù)選框)，點(diǎn)擊默認(rèn)聚焦而彈出輸入鍵盤，也就出現(xiàn)了上面的點(diǎn)透現(xiàn)象
方案一：來得很直接github上有個(gè)fastclick可以完美解決
引入fastclick.js，因?yàn)閒astclick源碼不依賴其他庫(kù)所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js里面加上
$(function() {
FastClick.attach(document.body);
});
當(dāng)然require的話就這樣：
var FastClick = require("fastclick");
FastClick.attach(document.body, options);
方案二：用touchend代替tap事件并阻止掉touchend的默認(rèn)行為preventDefault()
$("#cbFinish").on("touchend", function (event) {
//很多處理比如隱藏什么的
event.preventDefault();
});
方案三：延遲一定的時(shí)間(300ms+)來處理事件
$("#cbFinish").on("tap", function (event) {
setTimeout(function(){
//很多處理比如隱藏什么的
},320);
});
這種方法其實(shí)很好，可以和fadeInIn/fadeOut等動(dòng)畫結(jié)合使用，可以做出過度效果
理論上上面的方法可以完美的解決tap的點(diǎn)透問題，如果真的倔強(qiáng)到不行，用click
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93539.html
摘要：?jiǎn)栴}封裝的事件由和實(shí)現(xiàn)，事件在端無(wú)效使用中事件在中該版本的點(diǎn)透問題已經(jīng)解決可以放心使用，但是端仍然無(wú)效。一、問題描述實(shí)際學(xué)習(xí)與工作中可能會(huì)有這樣的需求：在移動(dòng)web中給有重疊的兩個(gè)元素都添加了點(diǎn)擊事件，當(dāng)觸發(fā)上方的元素的時(shí)候同時(shí)也會(huì)透過該元素觸發(fā)下面的元素。這就是點(diǎn)透，然而這并不是我想要的效果。二、例子下面通過多種方式來模擬感受點(diǎn)透：<divclass="tap"&...
摘要：移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下實(shí)現(xiàn)的源碼。點(diǎn)透是什么你可能碰到過在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)閉的按鈕，你點(diǎn)了這個(gè)按鈕關(guān)閉彈出層后后，這個(gè)按鈕正下方的內(nèi)容也會(huì)執(zhí)行點(diǎn)擊事件或打開鏈接。這個(gè)被定義為這是一個(gè)點(diǎn)透現(xiàn)象。 移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下zepto實(shí)現(xiàn)tap的源碼。 1、點(diǎn)透是什么 你可能碰到過在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)...
摘要：圖片描述移動(dòng)端的輪播圖可以有很多方式實(shí)現(xiàn)，最常見的可以使用定位手指事件。四手指移入移出開關(guān)定時(shí)器 圖片描述 移動(dòng)端的輪播圖可以有很多方式實(shí)現(xiàn)，最常見的可以使用定位 + 手指事件。但是我這里介紹的是 CSS3 中的 2d 變換和手指事件，因?yàn)樽儞Q屬性的代碼更加簡(jiǎn)潔優(yōu)雅 一. 移動(dòng)端的準(zhǔn)備工作 * { padding: 0; margin: 0; } img { d...
閱讀 5072·2021-09-07 09:58
閱讀 797·2019-08-30 15:55
閱讀 2935·2019-08-30 15:55
閱讀 927·2019-08-30 15:53
閱讀 1562·2019-08-29 12:57
閱讀 1829·2019-08-26 13:46
閱讀 571·2019-08-26 11:00
閱讀 3668·2019-08-23 15:42
