0

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 ?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Valentin Demeusy
  • 1
  • Welcome to SO. Language aside, it may help clarify if you add some code to your question to demonstrate – geedubb Jan 07 '15 at 18:23

3 Answers3

0

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

Community
  • 1
  • 1
Tyr
  • 2,810
  • 1
  • 12
  • 21
  • What about capture flag, the third parameter in addEventListener ? – Valentin Demeusy Jan 07 '15 at 18:47
  • The capture flag doesn't solve the issue. Also addEventListener doesn't work for IE<9, so for IE8 or lower you must use attachEvent() depending on compatiblity requirements. Click here for more information about addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener – Tyr Jan 07 '15 at 18:57
0

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)

stekhn
  • 1,969
  • 2
  • 25
  • 38
0

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.

Valentin Demeusy
  • 1