событий JavaScript мыши перехват

Question

В настоящее время я столкнулся с проблемой с Javascript и событие мыши OnMouseOver:

• я уже получил первый элемент (SVG прямоугольник), который называют функцию, когда курсор мыши находится над
• У меня есть второй элемент (png-изображение) над этим прямоугольником (но меньше прямоугольника)

И проблема в том, что когда мышь над изображением, прямая не вызывает функцию.
Как будто изображение перехватывает событие, чтобы ничего не делать с ним.

Я знаю, что я мог бы добавить событие к изображению, чтобы решить проблему, но есть ли способ сделать изображение «прозрачным» для события мыши и передать событие mouseover в нижний элемент?

Спасибо, и я прошу прощения за мой английский

Answer 1

Там нет стандартного решения этой проблемы. Вы можете использовать события jQuery mouseenter/mouseleave для решения этого вопроса, или вам нужно закодировать функцию для определения размеров и координат поля и проверить положение мыши самостоятельно.

Посмотрите здесь для примера: JavaScript mouseover/mouseout issue with child element

Answer 2

Вы можете попробовать CSS свойства указатель события:

img.overlay { 
    pointer-events: none; 
} 

«The CSS собственность указатель события позволяет авторам контролировать при каких обстоятельствах (если таковые имеются), то конкретный графический элемент может стать объектом событий мыши. Когда это свойство не указано, те же характеристики значения visiblePainted применяются к содержимому SVG.

В дополнение к указанию на то, что элемент не является объектом событий мыши, значение none указывает, что событие мыши переходит «через» элемент, а цель - «под ним». (Source: MDN)

Answer 3

Я нашел решение: я создаю еще один прозрачный прямоугольник над двумя другими элементами для захвата события. Последний прямоугольник перемещается одновременно с первым, создающим иллюзию, что первый из них захватывает событие мыши.