По умолчанию при нажатии a открывается окно, в котором можно выбрать собственный цвет.

Вместо этого я хочу сделать это двойным щелчком.

Я могу остановить работу одиночного клика с e.preventDefault, но я не могу понять, как вместо этого заставить doubleClick выполнять такое поведение.

Что я хочу:

handleDbClick = (e) => {
  //opens colour selection box
}
<input type="color" onDoubleClick={this.handleDbClick}/>

Решение:

handleClick = (e) => {
  if(e.detail === 1) {
     e.preventDefault()
     //do stuff for one click
  }
  //open colour selection box
}

<input type="color" onClick={this.handleClick} />

Благодарность

-1
HarryS 4 Фев 2022 в 16:32
1
Пожалуйста, добавьте соответствующий наименьший набор кода, который воспроизводит проблему, и опишите вашу конкретную проблему на основе этого.
 – 
Mark Schultheiss
4 Фев 2022 в 16:34
Вы можете просто использовать событие dblclick, чтобы открыть его. . Или проверьте event.detail для количество последовательных кликов.
 – 
Reyno
4 Фев 2022 в 16:36
Event.detail отлично работает, спасибо! Действительно изо всех сил пытался найти что-то подобное, пытаясь решить эту проблему.
 – 
HarryS
4 Фев 2022 в 16:44

2 ответа

Лучший ответ

Вы можете просто использовать event.detail для проверки количества последовательных кликов и использовать event.preventDefault(), если они не 2.

let input = document.querySelector("#colorInput");
input.addEventListener("click", (e) => {
  if (e.detail !== 2) e.preventDefault();
});
<input type="color" id="colorInput">
0
TechySharnav 4 Фев 2022 в 16:53

А как насчет этого:

 const colorInput = document.getElementById("colorInput")
        let count = 0;
        let interval
        
        colorInput.addEventListener('click', e => {
            count++
            clearInterval(interval)
            interval = setInterval(() => {
             count = 0   
            }, 300)
            if(count === 2) {
                count = 0
            } else {

                e.preventDefault();
            }
        })

Или это:

const colorInput = document.getElementById("colorInput")
        
        colorInput.addEventListener('click', e => {
            if(event.detail !== 2) {
                e.preventDefault()
            }
        })
0
Xcorp 4 Фев 2022 в 16:49