javascript - How to properly handle eventListener cross platform for separate left or right button events - Stack Overflow

admin管理员组

文章数量:1288055

I had a script that returned the element clicked or right clicked upon, origionally I did this by using the following:

document.addEventListener('click', function(e) {
  const targetEl = e.target;
  console.log('lc', targetEl);  
  clickCell(targetEl);
}, false);


document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  const targetEl = e.target;
  console.log('rc', targetEl); 
  rightClickCell(targetEl);
}, false);

this seemed to work, however I noticed some odd behaviour with left click, i.e. when the mouse was moved during click sometimes I would get the parent element (even though the parent el is completely covered) and realised that this was happening when the mouse pointer moved from one child cell to another during the click event.

I didn't want to simply have the parent element ignored at this stage as then some appropriate clicks would be ignored... and changing the click event listener to mouseup would fix the left click issue, but fire both events on right click, so, after some testing and reading I moved to:

document.addEventListener('contextmenu', e => e.preventDefault());

document.addEventListener('mouseup', function(e) {
  const targetEl = e.target;
  if (e.button === 0) {
    console.log('lc', targetEl);
    clickCell(targetEl);
  } else if (e.button === 2) {
    console.log('rc', targetEl);
    rightClickCell(targetEl);
  }
}, false);

This now seems to work how I want it to; handling left-click or trackpad 1-finger-click for function A and rightclick or trackpad 2-finger-click for function B...

Given the issues I already encountered I am worried that this may not work reliably in other environments, e.g. Mac's having a different implementation of right click. I have tried for a while to research this but have found confusing / contradictory explinations, so I would like to know how I should implement these event listeners to reliably work in any environment.

I had a script that returned the element clicked or right clicked upon, origionally I did this by using the following:

document.addEventListener('click', function(e) {
  const targetEl = e.target;
  console.log('lc', targetEl);  
  clickCell(targetEl);
}, false);


document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  const targetEl = e.target;
  console.log('rc', targetEl); 
  rightClickCell(targetEl);
}, false);

this seemed to work, however I noticed some odd behaviour with left click, i.e. when the mouse was moved during click sometimes I would get the parent element (even though the parent el is completely covered) and realised that this was happening when the mouse pointer moved from one child cell to another during the click event.

I didn't want to simply have the parent element ignored at this stage as then some appropriate clicks would be ignored... and changing the click event listener to mouseup would fix the left click issue, but fire both events on right click, so, after some testing and reading I moved to:

document.addEventListener('contextmenu', e => e.preventDefault());

document.addEventListener('mouseup', function(e) {
  const targetEl = e.target;
  if (e.button === 0) {
    console.log('lc', targetEl);
    clickCell(targetEl);
  } else if (e.button === 2) {
    console.log('rc', targetEl);
    rightClickCell(targetEl);
  }
}, false);

This now seems to work how I want it to; handling left-click or trackpad 1-finger-click for function A and rightclick or trackpad 2-finger-click for function B...

Given the issues I already encountered I am worried that this may not work reliably in other environments, e.g. Mac's having a different implementation of right click. I have tried for a while to research this but have found confusing / contradictory explinations, so I would like to know how I should implement these event listeners to reliably work in any environment.

• javascript
• html

Share Improve this question Follow asked Feb 22 at 16:43 PaulPaul 11166 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The mouseup event is reliable across all platforms for detecting mouse button presses, as it is a standard part of the mouse event API. It's in a way better than click because click involves both mousedown and mouseup, while mouseup is more straightforward for detecting the final mouse button release.

The default behavior of contextmenu on Mac is tied to right-click or a two-finger click. As you are preventing the event altogether, it should reliably block the contextmenu event regardless of the device.

本文标签：