如何添加 2 个 addeventlisteners 一起工作（例如：当鼠标指针位于屏幕左侧时，在 dblclick 上运行事件）

Question

New to JavaScript, trying to figure out how to combine addEventListener events.

For example, I want to trigger something when I double-click the side of the screen, within 30 or 40 pixels.

I assume I need to combine these somehow:

• document.addEventListener("dblclick",function (event) {
• document.addEventListener("mouseover", (event) => {

How is that done? I'm also struggling to get that mouseover working even alone, if anyone cares to take a stab at it!

Answer 1

You don't need mouseover event listener to do that.

Method 1: First create 30-40pixel div element, with position:fixed . Then add double click event to that div element.

Method 2: Add doubleclick event to the document, read event.clientX (or event.screenX). if event.clientX < 30, run what you want.

document.addEventListener("dblclick",function (event) { 
        if(event.clientX < 30 ) {
        // some logic
        }
})

Answer 2

Here is how you can listen for double click events and get the mouse x coordinate (which you can then use to check if it's within 30 or 40 pixels of the left side).

 const elem = document.querySelector('body'); elem.addEventListener('dblclick', e => { console.log(e.clientX); });

 <div style="height: 500px;"> Double click to log mouse x coordinate. </div>