How can I exclude an element from a mouseover event with Javascript?

Question

I'm basically trying to build the equivalent of the firebug inspector in the browser. I'm currently using the <body> as the container in this example:

container.onmouseover = function(ev) { inspect(ev.target); }

In the inspect method, I reposition and resize a semi-transparent fixed positioned element over the element returned from the event target. But this causes the mouseover event to subsequently inspect the overlay element itself.

I basically want the event handler to disregard the overlaid element completely (it only exists to provide visual feedback) and continue to fire onmouseover events for the elements detected beneath it. Does this make sense?

Answer 1

If you don't have to support all browsers then you could use the css property pointer-events . When set to none all events will be ignored. Try toggling pointer-events in this fiddle and see what I mean.

http://jsfiddle.net/zDygA/

Browser support

pointer-events:none;

I hate to link out, but this is a good article if you need to support IE.

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

How can I exclude an element from a mouseover event with Javascript?

Question

1 answers

solution1
2 ACCPTED 2012-02-11 06:48:34

How can I exclude an element from a mouseover event with Javascript?

Question

1 answers

solution1 2 ACCPTED 2012-02-11 06:48:34

solution1
2 ACCPTED 2012-02-11 06:48:34