Javascript鼠标事件拦截

Question

I'm currently facing a problem with Javascript and the mouse event onmouseover :

• I've got a first element (svg rectangle) which call a function when mouse is over
• I've got a second element (png image) above this rect (but smaller than the rect)

And the problem is that when the mouse is over the image, the rect doesn't call the function.
It's like the image is intercepting the event to do nothing with it.

I know I could add the event to the image too to solve the problem but is there any way to make the image kind of "transparent" for the mouse event and to transfer the mouseover event to the underneath element ?

Answer 1

There is no standard solution for this issue. You can use jQuery mouseenter/mouseleave events to solve that, or you have to code a function to detect the dimensions and coords of the box and check the mouse position by yourself.

Take a look here for an example: JavaScript mouseover/mouseout issue with child element

Answer 2

You might want to try the CSS property pointer-events:

img.overlay {
   pointer-events: none;
}

"The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead." ( Source: MDN )

Answer 3

I've found a solution : i create another transparent rectangle above the two other elements to capture the event. The final rectangle moves at the same time as the first giving the illusion that the first one is catching the mouse event.