JS右鍵點擊事件

一、JS右鍵點擊事件 copy不顯示

在瀏覽器中進行複製操作時，我們可能會使用右鍵點擊菜單中的「複製」選項。但是，當我們希望將這個操作實現在我們自己的網頁中時，就需要了解JS右鍵點擊事件了。

JS右鍵點擊事件主要包括三個部分：阻止默認事件、獲取滑鼠位置、自定義菜單。以下是一個簡單的示例：

document.oncontextmenu = function (e) {
  e.preventDefault();
  var menu = document.getElementById("menu");
  menu.style.display = "block";
  menu.style.left = e.pageX + "px";
  menu.style.top = e.pageY + "px";
};

上面的代碼中，我們首先使用了 preventDefault() 阻止了右鍵默認事件的觸發，然後使用 pageX 和 pageY 獲取了滑鼠的位置，並將其作為自定義菜單的顯示位置。

二、JS添加點擊事件

除了右鍵點擊事件外，我們還可以給元素添加其他類型的點擊事件。以下是一個示例：

var btn = document.getElementById("btn");
btn.onclick = function () {
  alert("You have clicked the button!");
};

上面的代碼中，我們獲取了一個 id 為 「btn」 的元素，並將其點擊事件綁定到了一個匿名函數上。當用戶點擊該元素時，就會觸發這個函數並彈出一個提示框。

三、jQuery右鍵點擊事件

jQuery 是一款流行的JS庫，它提供了豐富的事件綁定方法，包括右鍵點擊事件：

$(document).on("contextmenu", function (e) {
  e.preventDefault();
  var menu = $("#menu");
  menu.css({ left: e.pageX + "px", top: e.pageY + "px" });
  menu.show();
});

上面的代碼中，我們使用了 jQuery 的 on() 方法將上下文菜單事件綁定到了 document 上，並使用了 show() 方法顯示了自定義菜單。

四、JS自動執行點擊事件

有時候我們需要在頁面自動執行某個元素的點擊事件，可以使用下面的代碼：

var btn = document.getElementById("btn");
btn.click();

上面的代碼中，我們獲取了一個 id 為 「btn」 的元素，並使用了 click() 方法模擬了用戶的點擊操作。

五、JS添加右鍵點擊事件

如果我們需要給某個元素添加右鍵點擊事件，可以使用以下代碼：

var el = document.getElementById("el");
el.addEventListener("contextmenu", function (e) {
  e.preventDefault();
  var menu = document.getElementById("menu");
  menu.style.display = "block";
  menu.style.left = e.pageX + "px";
  menu.style.top = e.pageY + "px";
});

上面的代碼中，我們使用了 addEventListener() 方法將自定義菜單事件綁定到了一個 id 為 「el」 的元素上，並使用了 preventDefault() 阻止了默認事件的觸發。

六、JS觸發點擊事件

如果我們需要動態觸發某個元素的點擊事件，可以使用以下代碼：

var btn = document.getElementById("btn");
var event = document.createEvent("MouseEvents");
event.initMouseEvent(
  "click",
  true,
  true,
  window,
  0,
  0,
  0,
  0,
  0,
  false,
  false,
  false,
  false,
  0,
  null
);
btn.dispatchEvent(event);

上面的代碼中，我們獲取了一個 id 為 「btn」 的元素，並使用了 createEvent() 方法創建了一個滑鼠事件，然後使用了 dispatchEvent() 方法觸發了該事件。

七、原生JS點擊事件綁定

在原生JS中，我們可以使用 addEventListener() 方法或 attachEvent() 方法（IE 瀏覽器）給元素添加點擊事件。以下是一個示例：

var btn = document.getElementById("btn");

if (btn.addEventListener) {
  btn.addEventListener("click", function () {
    alert("You have clicked the button!");
  });
} else if (btn.attachEvent) {
  btn.attachEvent("onclick", function () {
    alert("You have clicked the button!");
  });
}

上面的代碼中，我們首先判斷了瀏覽器是否支持 addEventListener() 方法，如果支持就使用該方法添加點擊事件；否則就使用 attachEvent() 方法。兩種方法實現的效果是相同的。