I'm trying to get ctrl + left mouse click to do a certain behavior, and getting different results for different browsers.
Since on mac systems ctrl+lmb is translated to right click, it seems like I have to capture the 'contextmenu' event, and then check if it is actually ctrl+lmb.
But even overcoming that, for the following script, I'm getting different results between chrome and safari.
In Chrome console I see 'Clicked ctrl + left click' on click, and in Safari I see this message twice: while ctrl is held, both when I click lmb and when I release it.
box = document.getElementById("thebox").addEventListener('click',(event) => {
if (event.ctrlKey) {
console.log('Clicked ctrl + left click')
return;
}
console.log('Clicked left click');
})
box = document.getElementById("thebox").addEventListener('contextmenu',(event) => {
event.preventDefault();
if (event.buttons === 2 || event.buttons === 0) {
console.log("Clicked right click");
} else if (event.buttons === 1) {
console.log("Clicked ctrl + left click");
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="thebox" style='height: 100px; width: 100px; background-color: red;'></div>
<script src='./index.js'></script>
</body>
</html>I feel there should be a more simple solution to have a unified ctrl+lmb click across all browsers but can't find it, is it really that difficult?
Appreciate the help.