亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

記錄fastclick中一次手動(dòng)觸發(fā)click事件失敗

qieangel2013 / 2702人閱讀

摘要：為什么安卓可以正常工作代碼在剛運(yùn)行的時(shí)候，就判斷是否需要使用，我的安卓測(cè)試機(jī)大于且設(shè)置了。所以在安卓下我點(diǎn)擊使用的原生事件當(dāng)然沒問題。在第二次手動(dòng)事件中，因?yàn)榇藭r(shí)為，所以在中返回，接著從而順利觸發(fā)了原生事件。

在昨天的一個(gè)移動(dòng)端項(xiàng)目中引入fastclick后手動(dòng)觸發(fā)click事件失敗，查看了文檔也沒有找到解決的辦法，最后通過看fastclick源碼才解決。
如果不想看中間這么多文字，可以直接翻到最后看結(jié)論。

還原事故現(xiàn)場(chǎng)

想要實(shí)現(xiàn)的功能為點(diǎn)擊div1的時(shí)候手動(dòng)觸發(fā)input的click事件。代碼如下：

在沒有引入fastclick的時(shí)候，可以按照預(yù)期工作，引入之后，在Android中也可以正常工作，但是在iOS卻無論如何也不行。即使在input標(biāo)簽加上needsclick類也不行。
神奇的是如果連續(xù)手動(dòng)觸發(fā)兩次click事件，則在iOS中就可以正常工作了??！

代碼如下：

handleClick() {
    this.$refs.input.click()
    this.$refs.input.click()
}

想來想去，原因只能出在fastclick身上，首先看了文檔，并沒有發(fā)現(xiàn)解決的方法，只能去看源碼了。雖然第一次用fastclick的時(shí)候就讀過代碼，當(dāng)時(shí)只不過為了知道大概實(shí)現(xiàn)原理泛泛的讀了一遍，不夠細(xì)致。這次又重新看了一遍。關(guān)于源碼的解讀網(wǎng)上有很多，這里就不細(xì)說，代碼不長(zhǎng)，建議最好自己讀一讀。

追蹤溯源，找到問題原因癥結(jié)

看完源碼，就可以回答之前的疑問了。

1、為什么安卓可以正常工作？

代碼：

if (deviceIsAndroid) {
    metaViewport = document.querySelector("meta[name=viewport]");

    if (metaViewport) {
        // Chrome on Android with user-scalable="no" doesn"t need FastClick (issue #89)
        if (metaViewport.content.indexOf("user-scalable=no") !== -1) {
            return true;
        }
        // Chrome 32 and above with width=device-width or less don"t need FastClick
        if (chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) {
            return true;
        }
    }

// Chrome desktop doesn"t need FastClick (issue #15)
} else {
    return true;
}

在fastclick剛運(yùn)行的時(shí)候，就判斷是否需要使用fastclick，我的安卓測(cè)試機(jī)chrome大于32 且設(shè)置了width=device-width。所以在安卓下我點(diǎn)擊使用的原生click事件當(dāng)然沒問題。

2、為什么iOS需要手動(dòng)觸發(fā)兩次click事件才可以？

這就是這次“事故”的關(guān)鍵所在，當(dāng)我點(diǎn)擊的時(shí)候，一共觸發(fā)了單詞click事件，其中第一次為點(diǎn)擊div觸發(fā)，后兩次為手動(dòng)觸發(fā)input的click事件。

第一次click事件時(shí)，fastclick在onTouchStart中將targetElement設(shè)置為div1,
這次成功執(zhí)行sendClick() ，目標(biāo)并不是我們想要的input。

緊接著是第一次手動(dòng)觸發(fā)click事件，但是因?yàn)槭峭ㄟ^element.click()函數(shù)手動(dòng)觸發(fā)，所以沒有onTouchStart這個(gè)過程，因此此時(shí)targetElement當(dāng)然還是div1 ?。?！ 這時(shí)needsClick返回了false，從而導(dǎo)致onClick中onMouse函數(shù)也返回了false，并終止了事件，隨后就將targetElement置為null。

在第二次手動(dòng)click事件中，因?yàn)榇藭r(shí)targetElement為null，所以在onMouse中返回true，接著從而順利觸發(fā)了原生click事件。

if (!this.targetElement) {
    return true;
}
3、為什么在input標(biāo)簽加上needsclick也不能成功觸發(fā)click事件？

因?yàn)榈谝淮问謩?dòng)執(zhí)行click() 的時(shí)，這時(shí)候的targetElement還是div1，即點(diǎn)擊時(shí)的元素，而我將needsclick綁定在input上了，因此當(dāng)然在targetElement上找不到needsclick了。
此時(shí)我們也就找到了解決問題的辦法：將needsclick綁定在div1，即實(shí)際點(diǎn)擊的元素上。

結(jié)論及收獲

如果想觸發(fā)原生click事件，請(qǐng)將needsclick綁定在實(shí)際點(diǎn)擊的元素上，即e.targe上，而不是你手動(dòng)觸發(fā)的元素上。這可以說是fastclick的一個(gè)小bug，因?yàn)橹暗狞c(diǎn)擊影響了后面的點(diǎn)擊。

只能在click的回調(diào)函數(shù)中手動(dòng)觸發(fā)element.click() ，否則無效，有興趣的可以試試。這個(gè)在MDN上沒寫，算是意外收獲。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82764.html

相關(guān)文章

  • JS常用庫解密-FastClick

    摘要：但這樣副作用也很大，移動(dòng)端的交互體驗(yàn)全靠觸摸，將會(huì)干擾其他交互行為的處理，例如滾動(dòng)拖拽等。方案模擬修復(fù)法既然瀏覽器有這的延遲，那么我們來代替瀏覽器判斷，手動(dòng)觸發(fā)事件，這也是的解決方案。 眾所周知，移動(dòng)端在處理點(diǎn)擊事件的時(shí)候，會(huì)有300毫秒的延遲。恰恰是這300毫秒的延遲，會(huì)讓人有一種卡頓的體驗(yàn)。 這300毫秒的原因，在于早期瀏覽器的實(shí)現(xiàn)中，瀏覽器不知道用戶觸摸后，到底想做什么，所以故意...

    stormjun 評(píng)論0 收藏0

  • 移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)）

    摘要：移動(dòng)端觸摸點(diǎn)擊事件優(yōu)化源碼學(xué)習(xí)最近在做一些微信移動(dòng)端的頁面，在此記錄關(guān)于移動(dòng)端觸摸和點(diǎn)擊事件的學(xué)習(xí)優(yōu)化過程，主要內(nèi)容圍繞展開。當(dāng)指針設(shè)備通常指鼠標(biāo)在元素上移動(dòng)時(shí)事件被觸發(fā)。移動(dòng)端有延遲問題，可沒有哦。 移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)） 最近在做一些微信移動(dòng)端的頁面，在此記錄關(guān)于移動(dòng)端觸摸和點(diǎn)擊事件的學(xué)習(xí)優(yōu)化過程，主要內(nèi)容圍繞fastclick展開。fastclic...

    paney129 評(píng)論0 收藏0

  • 移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)）

    摘要：移動(dòng)端觸摸點(diǎn)擊事件優(yōu)化源碼學(xué)習(xí)最近在做一些微信移動(dòng)端的頁面，在此記錄關(guān)于移動(dòng)端觸摸和點(diǎn)擊事件的學(xué)習(xí)優(yōu)化過程，主要內(nèi)容圍繞展開。當(dāng)指針設(shè)備通常指鼠標(biāo)在元素上移動(dòng)時(shí)事件被觸發(fā)。移動(dòng)端有延遲問題，可沒有哦。 移動(dòng)端觸摸、點(diǎn)擊事件優(yōu)化（fastclick源碼學(xué)習(xí)） 最近在做一些微信移動(dòng)端的頁面，在此記錄關(guān)于移動(dòng)端觸摸和點(diǎn)擊事件的學(xué)習(xí)優(yōu)化過程，主要內(nèi)容圍繞fastclick展開。fastclic...

    fxp 評(píng)論0 收藏0

  • 新年第一發(fā)--深入不淺出zepto的Tap擊穿問題

    摘要：瀏覽器自動(dòng)響應(yīng)后續(xù)處理。瀏覽器行為部分是猜測(cè)，未驗(yàn)證。至于解決方案網(wǎng)上有很多，目前最好的是，不過也會(huì)有其他問題，例如在滑動(dòng)中點(diǎn)擊之類的。 問題來源 年前去阿里面試，過程中說道了fastclick解決iPhone機(jī)器上300ms點(diǎn)擊延遲的問題，然后就被問到了zepto的點(diǎn)擊穿透的現(xiàn)象以及產(chǎn)生這個(gè)具體原因，當(dāng)時(shí)回答的不是很好，主要是沒有特別深入的去研究這個(gè)原因，只是知道有這個(gè)現(xiàn)象和問題，大...

    tuantuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<