在Javascript中，雙擊是兩次簡單的單擊

Question

我的網頁中有一些可點擊的元素。 假設您單擊它們，則更改其背景顏色。 每次單擊時，它們都會顯示不同的顏色。 它們最初是灰色，然后是藍色，然后是黃色，然后是橙色，然后又回到灰色，依此類推...

現在的問題是所有這些都是通過單擊實現的，但是我希望將雙擊作為兩次單擊，而不觸發雙擊事件（確實會選擇單詞等）。

假設我們有以下句子

<p>This is my <span id="elem_1" className="color_1"> element </span></p>

這是我的js代碼：

var totalNbOfClicks = 0
var elem document.getElementbyId("elem_1")
elem.onclick = function () {
   totalNbOfClicks +=1
   totalNbOfClicks = totalNbOfClicks%4
   elem.className = "elem_"+totalNbOfClicks
}
elem.ondblclick = function(evt) {
   ClearSelection();
   evt.preventDefault()
}

function ClearSelection() {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}

現在，我雙擊使用此答案中詳細介紹的ClearSelection函數。

我想以某種方式找到一種在雙擊上觸發2次單擊事件的方法，但是我還沒有發現任何可以從已經提出的問題中解決問題的方法。

編輯：感謝@VLAZ的評論，我已經能夠發現問題可能源於此額外的東西：

選擇文本后，我還有其他事情想做，所以我添加了一個

elem.onMouseUp(e){

   //Do some stuff here with the selection e.g.,
   var sel = window.getSelection()
   selectedText = sel.toString();
   var range = window.getSelection().getRangeAt(0);
   console.log(selectedText)
   console.dir(range)
}

現在，如果我將e.preventDefault()為elem.onMouseUp(e) ，我將獲得預期的行為，但這不是我的選擇。

Answer 1

 var totalNbOfClicks = 0 var elem = document.getElementById("elem_1") elem.onclick = function () { totalNbOfClicks +=1; console.log("total", totalNbOfClicks); totalNbOfClicks = totalNbOfClicks%4; elem.className = "elem_"+totalNbOfClicks; } elem.ondblclick = function () { for(var i=0; i<=2; i++){ totalNbOfClicks +=1; console.log("total", totalNbOfClicks); totalNbOfClicks = totalNbOfClicks%4; elem.className = "elem_"+totalNbOfClicks; }} function ClearSelection() { if (window.getSelection) window.getSelection().removeAllRanges(); else if (document.selection) document.selection.empty(); }

 body{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p>This is my <span id="elem_1" className="color_1"> element </span></p> </body> </html>

當您雙擊它時將產生結果。雙擊時返回兩個單個事件，CSS禁用文本選擇。 希望它清除。

在Javascript中，雙擊是兩次簡單的單擊

問題描述

1 個解決方案

解決方案1
1 已采納 2019-09-13 16:51:22

在Javascript中，雙擊是兩次簡單的單擊

問題描述

1 個解決方案

解決方案1 1 已采納 2019-09-13 16:51:22

解決方案1
1 已采納 2019-09-13 16:51:22