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

Posted on by

vant/vue實現手機端長按事件

先給兩個事件

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

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

方法如下：

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

 之後發現長按後出現彈出菜單的現象，所以這裡要解決一下如何去禁用彈出的菜單

vant/vue實現禁止長按彈出菜單 

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

* {
  -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手機端長按事件以及禁止長按彈出菜單實現方法詳解的詳細內容，更多關於vant/vue手機端長按事件以及禁止長按彈出菜單的資料請關註WalkonNet其它相關文章！

推薦閱讀：