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); //再次清空定時器，防止重復注冊定時器
      this.loop = setTimeout(() => {
        console.log("長按了");
      }, 1000);
    },
 
    end() {
      clearTimeout(this.loop); //清空定時器，防止重復注冊定時器
    },

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

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

找到對應需要禁用菜單的頁面

* {
  -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)容，更多關于vant/vue手機端長按事件以及禁止長按彈出菜單的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

vue
事件

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