Click double-click

Let’s start with the double-click event

  1. Click on the

    Window.onclick = () => {console.log(' click ')}Copy the code

  2. Double click on the

    Window.ondblclick = () => {console.log(' double click ')}Copy the code

  3. But what if the click event is also triggered when we double-click?

  • The first thing to do is to delay the click event, which is the double click event within 300 milliseconds of each other

  • The delay timer needs to be cleared before each click and double – click

    Let timeId = null window.onclick = () => {clearTimeout(timeId) timeId = setTimeout(() => {console.log(' click ')}, 300)} window.ondblclick = () => {clearTimeout(timeId) console.log(' double click ')} ' 'Copy the code

Right click on the

  1. Right click event isoncontextmenuEach right click triggers the default mouse event,e.preventDefault()Yes To prevent default events, and yes to prevent event bubblinge.stopPropagation()
  2. Window.oncontextmenu = (e) => {e.preventDefault() console.log(' right click ')}Copy the code

Mouse wheel event

Window.onmousewheel = (e) => {// console.log(e.washer delta) if (e.washer delta > 0) {console.log(' mouse down ')} if (e.white delta < 0) {console.log(' scroll up ')}}Copy the code

Keyboard key + scroll event

window.onmousewheel = (e) => { if (! e.ctrlKey && ! Log (' mouse scroll down ')} if (e. mouse delta < 0) {console.log(' mouse scroll up ')}}Copy the code

Video explanation: Click double-click right click event wheel event