轻松禁用鼠标右键点击事件：用 Javascript 、Vue 实现

2023-07-27 00:59:36

禁用鼠标右键点击事件：JavaScript 和 Vue 指南

在网站开发中，我们可能偶尔会遇到一些特别的请求，例如要求禁用网站上的鼠标右键点击事件。实现这一功能可能并不那么直观，但通过使用 JavaScript 或 Vue，我们可以轻松实现。

一、使用 JavaScript 禁用鼠标右键点击事件

JavaScript 提供了 oncontextmenu 事件，它会在用户右键点击元素时触发。我们可以利用这一事件来阻止右键点击事件的默认行为，从而禁用它。

document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
});

这段代码会监听任何元素上的 oncontextmenu 事件，并在触发时阻止其默认行为。这样一来，右键点击事件将不会执行任何操作。

二、使用 Vue 禁用鼠标右键点击事件

在 Vue 中，我们可以通过 v-on 指令来禁用鼠标右键点击事件。

<template>
  <div @contextmenu="handleContextMenu">
  </div>
</template>

<script>
export default {
  methods: {
    handleContextMenu(e) {
      e.preventDefault();
    },
  },
};
</script>

这段代码将为任何包含它的元素添加一个 oncontextmenu 事件侦听器，并在触发时调用 handleContextMenu 方法。在该方法中，我们阻止了事件的默认行为。

三、示例代码

为了更好地理解如何使用这些方法，这里提供一个示例代码，它使用 Vue 来禁用鼠标右键点击事件：

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3.2.30/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <p>尝试右键点击我</p>
  </div>

  <script>
    const app = Vue.createApp({
      methods: {
        handleContextMenu(e) {
          e.preventDefault();
        },
      },
    });
    app.mount('#app');
  </script>
</body>
</html>