How to add 2 addeventlisteners to work together (e.g.: run event on dblclick when mouse pointer is at left side of screen)

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!

No, no need to combine with any mousemove handler. Click and double click events already give you access to the click coordinates. https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event — CBroe, Aug 18 '22 at 11:41

score 2 · Accepted Answer · edited Aug 22 '22 at 15:20

2

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

edited Aug 22 '22 at 15:20

Eggcellentos

1,570
1
18
25

answered Aug 18 '22 at 11:51

강동호

36
4

1

Method 2 is working for me, and I like that i don't need to add that div into the HTML. Thanks! – colorful-shirts Aug 20 '22 at 00:28

score 0 · Answer 2 · answered Aug 18 '22 at 11:49

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>

How to add 2 addeventlisteners to work together (e.g.: run event on dblclick when mouse pointer is at left side of screen)

2 Answers2