vant/vue手機(jī)端長按事件以及禁止長按彈出菜單實(shí)現(xiàn)方法詳解
更新時間：2022年12月24日 13:36:41 作者：Nanchen_42
這篇文章主要介紹了vant/vue手機(jī)端長按事件以及禁止長按彈出菜單實(shí)現(xiàn)方法詳解,需要的朋友可以參考下
vant/vue實(shí)現(xiàn)手機(jī)端長按事件
先給兩個事件
@touchstart="start"
@touchend="end"
因?yàn)関ue里的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實(shí)現(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手機(jī)端長按事件以及禁止長按彈出菜單實(shí)現(xiàn)方法詳解的詳細(xì)內(nèi)容，更多關(guān)于vant/vue手機(jī)端長按事件以及禁止長按彈出菜單的資料請關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
- Vue 組件事件觸發(fā)和監(jiān)聽實(shí)現(xiàn)源碼解析
- Vue?click事件傳遞參數(shù)的示例教程
- vue中@click綁定事件點(diǎn)擊不生效的原因及解決方案
- Vue中使用element-ui給按鈕綁定一個單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對話框
- 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中可以綁定多個事件嗎
- vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題
相關(guān)文章
這篇文章主要介紹了vue中activated的用法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue極簡生成器?Vuepress的實(shí)現(xiàn)
本文主要介紹了Vue極簡生成器?Vuepress的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-06-06
這篇文章主要介紹了Vue.js 中的條件渲染指令，Vue.js 中的條件渲染指令可以根據(jù)表達(dá)式的值，來決定在 DOM 中是渲染還是銷毀元素或組件。本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue項(xiàng)目中使用vue-layer彈框插件的方法
這篇文章主要介紹了vue項(xiàng)目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue-cli3中如何打包成zip壓縮文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue如何判斷dom的class,vue點(diǎn)擊給dom添加class然后獲取含有class的dom文件，具體內(nèi)容詳情大家參考下本文2018-04-04
vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
vue輸入框使用模糊搜索功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue輸入框使用模糊搜索功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05