javascript - pointer-events: none VML raphael solution

Question

I have implemented pointer-events: none on a Raphael element using jQuery like this:

var raphaelElement = Raphael.ellipse(x,y,w,h);
$(raphaelElement.node).css({'pointer-events': 'none'});

This works fine but of course in IE8, Raphael uses VML instead of SVG and this solution fails.

Does anyone have another solution to essentially make a Raphael element ignore events.

Answer 1

The only way to make this work for IE8 (and earlier) would be to actually catch the event, and in the event handler:

2. hide the element (.style.display='none')
3. use the elementFromPoint() method to find the next element below the 'catcher'
4. re-create and fire the event on that element (see also this)
5. show the catcher again (.style.display='')

This general approach (minus step 3) has been used for over 10 years on IE to allow the user to drag an element with it directly under the cursor while still detecting the 'mouseover' of possible drop target elements underneath.