css 'pointer-events' property alternative for IE

Question

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

Answer 1

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.

Answer 2

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?

Answer 3

I spent almost two days on finding the solution for this problem and I found this at last.

This uses javascript and jquery.

(GitHub) pointer_events_polyfill

This could use a javascript plug-in to be downloaded/copied. Just copy/download the codes from that site and save it as pointer_events_polyfill.js. Include that javascript to your site.

<script src="JS/pointer_events_polyfill.js></script>

Add this jquery scripts to your site

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

And don't forget to include your jquery plug-in.

It works! I can click elements under the transparent element. I'm using IE 10. I hope this can also work in IE 9 and below.

EDIT: Using this solution does not work when you click the textboxes below the transparent element. To solve this problem, I use focus when the user clicks on the textbox.

Javascript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

This lets you type the text into the textbox.

Answer 4

Cover the offending elements with an invisible block, using a pseudo element: :before or :after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

Thus you're click lands on the parent element. No good, if the parent is clickable, but works well otherwise.

Answer 5

Here is another solution that is very easy to implement with 5 lines of code:

1. Capture the 'mousedown' event for the top element (the element you want to turn off pointer events).
2. In the 'mousedown' hide the top element.
3. Use 'document.elementFromPoint()' to get the underlying element.
4. Unhide the top element.
5. 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;

});

Answer 6

Here's a small script implementing this feature (inspired by the Shea Frederick blog article that Kyle mentions):

• Pointer Events Polyfill.