两种JS实现屏蔽鼠标右键的方法

当我们开发网页时，有时为了保护自己的作品，需要对网页进行一些防抄袭的处理。其中一种处理方式就是禁止用户使用鼠标右键，以避免用户通过浏览器来获取或者篡改页面源代码，接下来，我将为大家介绍两种JS实现屏蔽鼠标右键的方法。

方法一：使用DOM API禁用鼠标右键

这种方式利用了不同浏览器对于事件对象event中button属性值的不同解析，从而达到禁用鼠标右键的目的。方法如下：

 document.oncontextmenu = function(event){
     if (window.Event) {
         if (event.which == 2 || event.which == 3) {
             return false;
         }
     }
     else {
         if (event.button == 2 || event.button == 3) {
             event.cancelBubble = true;
             event.returnValue = false;
             return false;
         }
     }
 }

以上代码中，我们监听了DOM对象上的oncontextmenu事件，当用户右击鼠标时，便会触发此事件，我们在事件处理函数中，判断事件对象event中的鼠标键位。当键位为2（在多数浏览器中代表鼠标右键）或3（在MacOS中代表鼠标右键），便禁用此事件并返回false，从而屏蔽了鼠标右键。

方法二：阻止原生右键菜单事件

这种方式在用户右击鼠标时，弹出自定义菜单，并且屏蔽了原生的右键菜单。代码如下：

document.addEventListener('contextmenu', function (event) {
    var popmenu = document.getElementById('popmenu'); // 获取自定义菜单
    event.preventDefault(); // 阻止默认的右键菜单事件
    popmenu.style.display = 'block'; // 展示自定义菜单
    popmenu.style.left = event.clientX + 'px';
    popmenu.style.top = event.clientY + 'px';
});

在代码中，我们监听了DOM对象上的contextmenu事件，当用户右击鼠标时，便会触发此事件，我们在事件处理函数中，首先使用preventDefault()方法阻止了默认的右键菜单事件。随后，我们获取自定义的菜单元素，并使其显示出来，并将其位置定位到事件对象event的点击位置。

这种方式需要注意的是，由于屏蔽了原生的右键菜单事件，因此我们需要通过JS代码来实现自定义的右键菜单，才能达到用户体验上更好的效果。

以上是两种JS实现屏蔽鼠标右键的方法，鉴于在实际开发中这种方式被视为一种“伪保护”，因此再次提醒开发者，应该寻求更加全面更加妥善的保护措施。