Клик сквозь элемент для разных кнопок мыши
Здравствуйте. Есть простая на первый взгляд задача, которая легко решается на системных языках программирования, но которая поставила меня в тупик при попытке реализации её на Web:
На странице располагается 1 элемент - div.box, к примеру. Клик левой кнопкой мыши должен проходить сквозь этот элемент. Для клика элемента не должно существовать вообще, а срабатывать он должен на родителе (document.body). Клик правой кнопкой мыши должен регистрироваться на элементе как обычно. Как сделать так, чтобы элемент игнорировал сразу все события мыши с помощью CSS, я знаю - pointer-events: none. Но как игнорировать события мыши для одной кнопки и одновременно регистрировать для другой - я не знаю. Кто-нибудь может подсказать решение или функции языка JavaScript, с помощью которых можно решить эту задачу? |
Цитата:
const box = document.querySelector('div.box');
box.addEventListener('click', function (event) {
if(event.button !== 2) return; // Нажата не правая кнопка
event.stopPropagation(); // Если не надо всплывать до document
// Обработка события правой кнопки
})
document.addEventListener('click', function (event) {
if(event.button !== 0) return; // Нажата не левая кнопка
// Обработка события
})
|
Цитата:
Небольшое замечание по вашему коду: В вашем примере в обработчике для box события "click" выполнение кода будет всегда завершаться первой строкой (return), так как событие "click" вызывается только для "главной кнопки" (event.button для мыши будет всегда равен "0"). Поэтому событие "click" нужно заменить на "auxclick". В остальном ваш пример не совсем здесь подходит, так как не происходит главного: клика сквозь элемент div.box. Если под элементом div.box будет другой элемент (к примеру, div.box2) со своим собственным обработчиком:
box2.onclick = () => console.log('box_2')
Он не будет вызван, так как события мыши будут перехватываться div.box. |
Цитата:
Значит mouseup на box ловить нужно. И отменять контекстное меню на нем
<head>
<style>
.box2 {
position: relative;
background-color: yellow;
width: 400px;
height: 200px;
}
.box {
position: relative;
background-color: red;
width: 200px;
height: 100px;
margin: 30px auto;
}
</style>
</head>
<body>
<div class=box2>
box2
<div class=box>
box<br>
Click
</div>
</div>
<script>
const box = document.querySelector('.box');
const box2 = document.querySelector('.box2');
document.body.addEventListener('click', (event) => {
console.log('body left click');
})
box2.addEventListener('click', (event) => {
console.log('box2 left click');
})
/*
box2.addEventListener('mouseup', (event) => {
console.log('box2 mouse up');
})
*/
box.addEventListener('mouseup', (event) => {
if (event.button === 2) {
event.preventDefault();
console.log('box right click');
}
})
box.addEventListener('contextmenu', (event) => {
event.preventDefault();
})
</script>
Надо пересматривать такие интерфейсы. Не принято в WEB кликать правой клавишей. Это для контекстного меню. И реализовать для тачскринов будет проблематично. |
В вашем примере .box2 является родителем для .box, что является очень специфичным примером, который, к сожалению, нельзя назвать универсальным решением. Это похоже на создание условий задачи под решение, а не создание решения под условия задачи. В любом случае, спасибо вам за уделённое время и старания.
Кажется решение нашлось в виде имитации "pointer-events: none" средствами JаvaScript: Во время клика по ".box" устанавливать "display: none", делать программный клик по элементу под курсором и возвращать для ".box" начальное значение "display". Цитата:
|
Цитата:
Цитата:
|
box.addEventListener('click', (event) => {
event.stopImmediatePropagation();
});
box.addEventListener('pointerdown', (event) => {
event.preventDefault();
});
box.addEventListener('contextmenu', (event) => {
event.preventDefault();
alert('Hello');
});
Оно? |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 17:33. |