在Javascript中，双击是两次简单的单击

Question

I have some elements in my webpage that are clickable. 我的网页中有一些可点击的元素。 When you click on them they, let's say, change their background color. 假设您单击它们，则更改其背景颜色。 Every time you click they get a different color. 每次单击时，它们都会显示不同的颜色。 They are initially gray, then blue, then yellow then orange and back to gray and so on... 它们最初是灰色，然后是蓝色，然后是黄色，然后是橙色，然后又回到灰色，依此类推...

Now the problem is that all of this is implemented on single clicks, but I would like my double clicks to act as two single clicks and not fire a double click event (which does select the word etc...) 现在的问题是所有这些都是通过单击实现的，但是我希望将双击作为两次单击，而不触发双击事件（确实会选择单词等）。

Let's imagine we have the following sentence 假设我们有以下句子

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

And this is my js code: 这是我的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();
}

Now I use the ClearSelection function detailed in this answer on my double click. 现在，我双击使用此答案中详细介绍的ClearSelection函数。

I would like to somehow find a way to fire 2 single click events on a double click, but I haven't found anything that could help on SO from already asked questions. 我想以某种方式找到一种在双击上触发2次单击事件的方法，但是我还没有发现任何可以从已经提出的问题中解决问题的方法。

Edit: thanks to @VLAZ's comment, I have been able to find that the problem could originate from this extra thing: 编辑：感谢@VLAZ的评论，我已经能够发现问题可能源于此额外的东西：

I have some extra thing that I want to do when the text get selected so I have added a 选择文本后，我还有其他事情想做，所以我添加了一个

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

Now if I had e.preventDefault() to elem.onMouseUp(e) , I get the intended behaviour, but that's not an option for me. 现在，如果我将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>

This will result when you double click on it... It is returning two single events on double click, CSS disables text selection. 当您双击它时将产生结果。双击时返回两个单个事件，CSS禁用文本选择。 Hope its clear. 希望它清除。

在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