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

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

@click @tap重疊事件區分

點擊remove事件會觸發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事件的區別

click事件

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

tap事件

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

點透問題

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

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

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

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