我的网页中有一些可点击的元素。比如说，当您单击它们时，它们会更改背景颜色。每次单击时，它们都会获得不同的颜色。它们最初是灰色的，然后是蓝色的，然后是黄色的，然后是橙色的，然后又回到灰色等等......
现在的问题是，所有这些都是通过单击实现的，但我希望我的双击充当两次单击，而不是触发双击事件(它会选择单词等...)
假设我们有以下句子
<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 个单击事件，但我还没有发现任何可以从已经提出的问题中提供帮助的内容。
<小时/>编辑:感谢@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)，我会得到预期的行为，但这对我来说不是一个选择。
最佳答案
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 - 使双击相当于 Javascript 中的两次简单单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57927021/