vue 禁止鼠标左键点击事件滚轮右键依旧可用办法

原创于 2022-07-05 21:36:41 发布 · 745 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文提供了一个使用Vue.js实现的示例代码，通过监听鼠标事件来切换元素的pointer-events属性，以此达到禁用鼠标左键的效果。该示例包括了绑定事件处理程序和CSS样式设置。

直接上代码懒得解释了。。。。
在这里插入图片描述
绑定的class

主要代码

<div class="main-51world" id="map_51world"
         @mousedown="preventEvent($event)" @mouseup="is51Disabled=false"
    >
      <div id="player" :class="{'is51Disabled':is51Disabled}"></div>
    </div>


.is51Disabled {
  pointer-events: none
}
`

 preventEvent(e) {
      //console.log('e========'+e.button)
      switch (e.button) {
        case 0:
          this.is51Disabled =true
          break
      }
    }``