vant/vue手機(jī)端長按事件以及禁止長按彈出菜單實(shí)現(xiàn)方法詳解
vant/vue實(shí)現(xiàn)手機(jī)端長按事件
先給兩個(gè)事件
@touchstart="start" @touchend="end"
因?yàn)関ue里的touchend沒有封裝,所以需要我們自己去寫
方法如下:
start() { clearTimeout(this.loop); //再次清空定時(shí)器,防止重復(fù)注冊(cè)定時(shí)器 this.loop = setTimeout(() => { console.log("長按了"); }, 1000); }, end() { clearTimeout(this.loop); //清空定時(shí)器,防止重復(fù)注冊(cè)定時(shí)器 },
之后發(fā)現(xiàn)長按后出現(xiàn)彈出菜單的現(xiàn)象,所以這里要解決一下如何去禁用彈出的菜單
vant/vue實(shí)現(xiàn)禁止長按彈出菜單
找到對(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ī)端長按事件以及禁止長按彈出菜單實(shí)現(xiàn)方法詳解的詳細(xì)內(nèi)容,更多關(guān)于vant/vue手機(jī)端長按事件以及禁止長按彈出菜單的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- Vue 組件事件觸發(fā)和監(jiān)聽實(shí)現(xiàn)源碼解析
- Vue?click事件傳遞參數(shù)的示例教程
- vue中@click綁定事件點(diǎn)擊不生效的原因及解決方案
- Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對(duì)話框
- vue中如何給el-table-column添加指定列的點(diǎn)擊事件
- vue長按事件和點(diǎn)擊事件沖突的解決
- vue項(xiàng)目如何實(shí)現(xiàn)Echarts在label中獲取點(diǎn)擊事件
- Vue Element-ui 鍵盤事件失效的解決
- Vue如何給組件添加點(diǎn)擊事件?@click.native
- vue中可以綁定多個(gè)事件嗎
- vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題
相關(guān)文章
Vue極簡(jiǎn)生成器?Vuepress的實(shí)現(xiàn)
本文主要介紹了Vue極簡(jiǎn)生成器?Vuepress的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-06-06vue項(xiàng)目中使用vue-layer彈框插件的方法
這篇文章主要介紹了vue項(xiàng)目中使用vue-layer彈框插件的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue輸入框使用模糊搜索功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue輸入框使用模糊搜索功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05