vant/vue手機端長按事件以及禁止長按彈出菜單實現(xiàn)方法詳解

更新時間：2022年12月24日 13:36:41 作者：Nanchen_42

這篇文章主要介紹了vant/vue手機端長按事件以及禁止長按彈出菜單實現(xiàn)方法詳解,需要的朋友可以參考下

vant/vue實現(xiàn)手機端長按事件

先給兩個事件

      @touchstart="start"
      @touchend="end"

因為vue里的touchend沒有封裝，所以需要我們自己去寫

方法如下：

    start() {
      clearTimeout(this.loop); //再次清空定時器，防止重復(fù)注冊定時器
      this.loop = setTimeout(() => {
        console.log("長按了");
      }, 1000);
    },
 
    end() {
      clearTimeout(this.loop); //清空定時器，防止重復(fù)注冊定時器
    },

之后發(fā)現(xiàn)長按后出現(xiàn)彈出菜單的現(xiàn)象，所以這里要解決一下如何去禁用彈出的菜單

vant/vue實現(xiàn)禁止長按彈出菜單

找到對應(yīng)需要禁用菜單的頁面

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 document.oncontextmenu = function (e) {
      e.preventDefault();
    };

如果是想要停止冒泡，對需要停止冒泡的元素使用onclick.stop即可

以上就是vant/vue手機端長按事件以及禁止長按彈出菜單實現(xiàn)方法詳解的詳細內(nèi)容，更多關(guān)于vant/vue手機端長按事件以及禁止長按彈出菜單的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

vue
事件

相關(guān)文章

Element?plus?表單中下拉框的空值問題解決
有時候會碰到查詢條件需要用下拉框來區(qū)分的時候,比如需要區(qū)分全部?|?啟用?|?停用三個狀態(tài),這時一般會給全部的value值設(shè)置為'',但是這樣會導致下拉框無法選中對應(yīng)的全部選項,本文就來介紹一下這個問題解決,感興趣的可以了解一下
2024-11-11
Vue.js中使用components組件的實例講解
這篇文章主要介紹了Vue.js中使用components組件的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
詳解input組合事件如何監(jiān)聽輸入中文
這篇文章主要為大家介紹了input組合事件如何監(jiān)聽輸入中文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
使用vite發(fā)布app存在的所有問題解決方法
最近項目中使用了vue3+vite開發(fā)一個App項,下面這篇文章主要給大家介紹了關(guān)于使用vite發(fā)布app存在的所有問題的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
vue組件內(nèi)部引入外部js文件的方法
這篇文章主要介紹了vue組件內(nèi)部引入外部js文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
vue頁面回退或關(guān)閉,發(fā)送請求不中斷問題
這篇文章主要介紹了vue頁面回退或關(guān)閉,發(fā)送請求不中斷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue.js中NaiveUI組件文字漸變的實現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實現(xiàn)，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-07-07
Vue3實現(xiàn)clipboard復(fù)制的使用示例
在日常開發(fā)中,為用戶提供復(fù)制文本功能的需求比較常見,下面介紹一款vue3可用的插件,可以快速實現(xiàn)這個功能,感興趣的可以了解一下
2023-11-11
vue3使用videojs播放m3u8格式視頻教程
m3u8是一種基于HTTP Live Streaming（HLS）文件視頻格式,它主要是存放整個視頻的基本信息和分片(Segment)組成,下面這篇文章主要給大家介紹了關(guān)于vue3使用videojs播放m3u8格式視頻的相關(guān)資料,需要的朋友可以參考下
2023-06-06