使双击充当Javascript中的两次简单单击答案

【问题标题】：Making double clicks act as two simple clicks in Javascript使双击充当Javascript中的两次简单单击
【发布时间】：2020-01-15 12:43:35
【问题描述】：

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

现在的问题是所有这些都是通过单击实现的，但我希望我的双击充当两次单击而不触发双击事件（它确实选择了单词等......）

假设我们有以下句子

<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的评论，我发现问题可能源于这个额外的东西：

当文本被选中时，我有一些额外的事情要做，所以我添加了一个

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)，我会得到预期的行为，但这不是我的选择。

【问题讨论】：

它通常不会做两次点击事件吗？
它没有。它执行简单的单击和双击@VLAZ
When I double click I do get two click events being fired。所以我无法重现覆盖两次点击的双击行为。
@VLAZ 你是对的，我已经缩小了问题的出处。请检查我的编辑

标签： javascript events click listener selection

【解决方案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 禁用文本选择。希望清楚。

【讨论】：

可能是你所问的答案......刚刚使用了``` ondblclick ```事件
（多么可爱的用户名 :)）感谢 VLAZ 的 cmets，我更新了我的问题。请参阅编辑。仍然赞成，因为它是对最初问题的一个很好的回答:)