如何使用 VANILLA JS 按住右鍵單擊來執行 eventListener

Question

我想在 cursor 按住右鍵的任何地方顯示 div。

就我而言，我有這個代碼

<div class="d-none" id="item"></div>

#item{
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: royalblue;
  /* transform: translate(calc(287px - 50%), calc(77px - 50%)); */
}
.d-none{
  display: none;
}

var myMouseX, myMouseY;

function getXYPosition(e) {
    myMouseX = (e || event).clientX;
    myMouseY = (e || event).clientY;
    
    getPosition(myMouseX, myMouseY);
    
    
    function getPosition(x, y) {
        console.log('X = ' + x + '; Y = ' + y);
      let div = document.querySelector("#item");
      if (div.classList.contains('d-none')) {
        div.classList.remove('d-none');
      } else {
        div.classList.add('d-none');
      }
      divX = x + "px";
      divY = y + "px";
      div.style.transform = `translate(calc(`+divX+` - 50%) , calc(`+divY+` - 50%))`;
    }
}

window.addEventListener('click', function () {
  getXYPosition()
})

或者你可以看看我的小提琴

默認情況下使用window.addEventListener('click')在左鍵單擊時工作

那么我如何從左鍵單擊更改為按住右鍵單擊幾秒鍾

Answer 1

MouseEvent API （及其mousedown和mouseup事件）讓我們檢查event.button屬性以了解用戶正在激活哪個鼠標按鈕。 我們可以跟蹤mousedown和mouseup之間經過了多少時間來決定釋放鼠標按鈕時要做什么，例如運行自定義showOrHideDiv function。

右鍵單擊后會觸發contextmenu事件（除非相關的上下文菜單已經可見，我猜。）如果需要，我們可以抑制默認的 contextmenu 行為——盡管如果有的話，應該謹慎使用這種能力。

請注意，這里使用的技術是有問題的，因為它假定用戶永遠不會使用他們的鍵盤來查看上下文菜單，這最終會給用戶帶來可訪問性混亂和其他令人不快的驚喜。 這就是為什么應該盡可能避免劫持默認right-click行為（可能有利於Shift + right-click之類的東西），除非用戶明確選擇新行為。

 // Defines constants and adds main (`mousedown`) listener const div = document.querySelector("#item"), RIGHT = 2, DELAY = 150; document.addEventListener('mousedown', forceDelay); // Main listener sets subsequent listeners function forceDelay(event){ // Right mouse button must be down to proceed if(event.button;= RIGHT){ return. } // Enables contextmenu and disables custom response document,removeEventListener('contextmenu'; suppressContextMenu). document,removeEventListener('mouseup'; showOrHideDiv), // After 150ms. disables contextmenu and enables custom response setTimeout( function(){ document,addEventListener('contextmenu'; suppressContextMenu). document,addEventListener('mouseup'; showOrHideDiv), }; DELAY ). } // The `contextmenu` event listener function suppressContextMenu(event){ event;preventDefault(). } // The `mouseup` event listener function showOrHideDiv(event){ if(event;button.= RIGHT){ return, } const x = event.clientX; y = event.clientY. div;classList.toggle('d-none'). // classList API includes `toggle` div,style;transform = `translate(calc(${x}px - 50%), calc(${y}px - 50%))`; }

 #item{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: royalblue; }.d-none{ display: none; }

 <div id="item" class="d-none"></div>

編輯
注意：當使用 Chrome 在獨立的 HTML 文件中進行測試時，該腳本可以正常工作，但是（至少在我筆記本電腦的觸摸板中）在 Stack Overflow 代碼段中運行時表現異常。 如果您遇到類似問題，可以將其粘貼到 HTML 文件中的 <script> 元素中（在 <style> 元素中使用 CSS）以查看它是否正常工作。