css 'pointer-events' property alternative for IE
I have a drop down navigation menu in which some of the title should not navigate to other page when clicked(these title open a drop down menu when clicked on) while others should navigate (these dont have dropdown and navigate directly).However, both types have href
defined to them
To solve this i added the following css for the former type of titles
pointer-events: none;
and it is working fine.But since this property is not supported by IE, i am looking for some work-around. The annoying thing is that i don't have access and privilege to change the HTML and JavaScript code completely.
Any ideas?
Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.
There is however a solution I found:
Forwarding Mouse Events Through Layers
This uses a plugin that uses some not well known/understood properties of Javascript to take the mouse event and send it to another element.
There is also another Javascript solution here.
Update for October 2013: apparently it's coming to IE in v11. Source. Thanks Tim.
Here is another solution that is very easy to implement with 5 lines of code:
- Capture the 'mousedown' event for the top element (the element you want to turn off pointer events).
- In the 'mousedown' hide the top element.
- Use 'document.elementFromPoint()' to get the underlying element.
- Unhide the top element.
- Execute the desired event for the underlying element.
Example:
//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {
$(this).hide();
var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
$(this).show();
$(BottomElement).mousedown(); //Manually fire the event for desired underlying element
return false;
});
There's a workaround for IE - use inline SVG and set pointer-events="none" in SVG. See my answer in How to make Internet Explorer emulate pointer-events:none?