快捷導(dǎo)航

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

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

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

vant/vue實(shí)現(xiàn)手機(jī)端長(zhǎng)按事件

先給兩個(gè)事件

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

因?yàn)関ue里的touchend沒有封裝，所以需要我們自己去寫

方法如下：

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

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

vant/vue實(shí)現(xiàn)禁止長(zhǎng)按彈出菜單

找到對(duì)應(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();
    };

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

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

您可能感興趣的文章:

vue
事件

相關(guān)文章

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