Vue项目判断鼠标点击事件的左键、中键（滚轮）或右键

Vue项目判断鼠标点击事件的左键、中键（滚轮）或右键

去掉特定区域的右键点击事件

在需要去掉右键点击事件的区域最外层div标签中添加@contextmenu.prevent属性

<template>
  <div id="app" @contextmenu.prevent>
  </div>
</template>

在特定区域内添加监听鼠标点击事件的方法

在需要判断鼠标点击方式的区域标签中添加@mousedown属性，并在methods方法中定义相应的监听方法来判断鼠标的点击方式

• 不携带参数

  <template>
    <div id="test">
      <button id="test" @mousedown="test">Test</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {};
    },
    methods: {
      test(event) {
        if (event.button == 0) {
          alert("你点了左键");
        } else if (event.button == 1) {
          alert("你点了滚轮");
        }else if (event.button == 2) {
          alert("你点了右键");
        }
      }
    }
  };
  </script>
  
  <style></style>
  

• 携带参数

  <template>
    <div id="test">
      <button id="test" @mousedown="test(lable, $event)">Test</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {};
    },
    methods: {
      test(lable, event) {
        if (event.button == 0) {
          alert("你点了左键" + lable);
        } else if (event.button == 1) {
          alert("你点了滚轮" + lable);
        }else if (event.button == 2) {
          alert("你点了右键" + lable);
        }
      }
    }
  };
  </script>
  
  <style></style>
  

参考文章：

在Vue.js中什么是内联处理器？

js去掉浏览器右键点击默认事件（+vue项目开启右键行为）