vue的@click和@tap重疊事件區(qū)分方式是什么

這篇“vue的@click和@tap重疊事件區(qū)分方式是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue的@click和@tap重疊事件區(qū)分方式是什么”文章吧。

@click @tap重疊事件區(qū)分

點擊remove事件會觸發(fā)details事件,使用@click.stop

官方介紹

<ul>
    <li v-for="item in data.list" :key="item.id" @click="details(item)">
        <font @click.stop="edit(item)">編輯</font>
        <font @click.stop="remove(item)">刪除</font>
    </li>
</ul>

<ul>
    <li v-for="item in data.list" :key="item.id" @tap="details(item)">
        <font @tap.stop="edit(item)">編輯</font>
        <font @tap.stop="remove(item)">刪除</font>
    </li>
</ul>

click和tap事件的區(qū)別

click事件

click事件是pc端的單機事件，但是當這個事件在移動端實現(xiàn)的時候，會出現(xiàn)延遲300ms的現(xiàn)象，所以移動端一般用tap來代替click。

tap事件

tap可以減少click在移動端的延遲，提高了性能。

點透問題

在同一個z軸上，z-index不同的兩個元素，上面的元素是一個綁定了tap事件的，下面是一個a標簽，一旦tap觸發(fā)，這個元素就會display: none，而從上面的tap可以看出，有touchstart、touchend，所以會300ms之后觸發(fā)click事件，而z-index已經(jīng)消失了，所以，觸發(fā)了下面的a的click事件，注意： 我們認為a標簽?zāi)J是綁定了click事件的。而這種現(xiàn)象不是我們所期待的。

使用fastclick來解決移動端輸入框聚焦不靈敏問題

在移動端，輸入框可能會出現(xiàn)點擊后無法輸入，需要長按或者連續(xù)點擊才能獲得輸入框的聚焦，這時候可以使用fastclick來解決這個問題。

以上就是關(guān)于“vue的@click和@tap重疊事件區(qū)分方式是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。