Триггер конкретного события мыши на другом элементе

Question

У меня есть веб-приложение, содержащее изображение, на котором происходит событие mousewheel, чтобы увеличить изображение точно в точке, где находится курсор.

Наверху этого изображения я показываю пользовательскую подсказку, которая представляет собой только div, содержащий текст. Когда I mousewheel на всплывающей подсказке, изображение не будет увеличено.

Я попытался связать событие mousewheel изображения со всплывающей подсказкой, но тогда offsetX и offsetY события соответствуют положению курсора относительно всплывающей подсказки, а не по отношению к изображению.

Как я могу:

• либо получить изображениеoffsetX и offsetY, даже тогда, когда курсор находится над подсказкой? или
• предотвратить всплывающую подсказку, чтобы поймать событие мыши перед изображением?

EDIT: На самом деле, Раньше я мог выбрать подсказку, нажав на нее; но добавив стиль CSS 'pointer-events:none' (предложенный Aramil Rey), событие click не имеет эффектов (очевидно).

Поэтому, как я могу:

• предотвратить всплывающую подсказку, чтобы поймать mousewheel событие перед изображением?
• и все еще разрешить всплывающую подсказку click?

Answer 1

Я предполагаю, что в настоящее время вы получаете offsetX и offsetY от event.target. Установите идентификатор изображения и замените event.target на $("#imageID")[0]. Еще лучше, jquery предоставляет offset function.

var image = $('#image'); 

image.add('.tooltip').bind('mousewheel', function (event) { 
    event.preventDefault(); 

    var offset = image.offset(); 
    var mouseX = event.pageX - offset.left; 
    var mouseY = event.pageY - offset.top; 

    // zoom stuff 
}); 

Answer 2

Вы попробовали использовать CSS: pointer-events:none; на всплывающей подсказке?

JS Fiddle

Попробуйте зависания на красном DIV, и вы заметите, что это не вызовет его вложенное событие, и Intead она будет срабатывать желтый DIV на mouseeenter случае, если ввести этот DIV, даже если курсор находится над красным div.

$('.asd').on('mouseenter', function() { 
 
    alert('asd'); 
 
}); 
 

 
$('.ddaa').on('mouseenter', function() { 
 
    alert('ddaa'); 
 
});

.ddaa { 
 
    padding-top: 15px; 
 
    background-color: yellow; 
 
} 
 

 
.asd { 
 
    position: absolute; 
 
    width: 100%; 
 
    pointer-events:none; 
 
    padding-top: 10px; 
 
    top: 5px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ddaa"> 
 
</div> 
 
<div class="asd"> 
 
</div>