在 Javascript 中使双击相当于两次简单的点击

Question

我的网页中有一些可点击的元素。当你点击它们时，比方说，它们会改变它们的背景颜色。每次你点击它们都会得到不同的颜色。它们最初是灰色的，然后是蓝色的，然后是黄色的，然后是橙色的，然后又变回灰色，依此类推...

现在的问题是所有这些都是通过单击实现的，但我希望我的双击可以作为两次单击而不是触发双击事件（select 这个词等...)

假设我们有以下句子

<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();
}

现在我在双击时使用 this answer 中详述的 ClearSelection 功能。

我想以某种方式找到一种在双击时触发 2 个单击事件的方法，但我还没有从已经提出的问题中找到任何可以帮助 SO 的方法。

编辑：感谢@VLAZ 的评论，我发现问题可能源于这个额外的东西：

当文本被 select 编辑时，我还想做一些额外的事情，所以我添加了一个

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 中使双击相当于两次简单的点击

Making double clicks act as two simple clicks in Javascript

javascript

events

click

listener

selection