Rectangle 27 0

html css 'pointer events' property alternative for IE?


"you can't expect to see it in IE browsers for another million years."

Documentation of ie9 says it supports this property(i've not tried ie9 yet however).Anyway, i already had ideas in my mind which are given in the links but as i was looking for some css specific solution i cannot use them. I will try to modify the html/js code rather spending time on this problem.Thanks a lot for your time and help

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 also another Javascript solution here.

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.

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>
a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

IE treats this as an disabled element and does not trigger click event. However, disabled is not a valid attribute on an anchor tag. Hence this won't work in other browsers. For them pointer-events:none is required in the styling.

It's worth mentioning that specifically for IE, disabled=disabled works for anchor tags:

UPDATE 1: So adding following rule feels like a cross-browser solution to me UPDATE 2: For further compatibility, because IE will not form styles for anchor tags with disabled='disabled', so they will still look active. Thus, a:hover{} rule and styling is a good idea:

Working on Chrome, IE11, and IE8. Of course, above CSS assumes anchor tags are rendered with disabled="disabled"

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


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?

this is a great solution for some cases but i can't use this in my case.

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


//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;

});
  • Capture the 'mousedown' event for the top element (the element you want to turn off pointer events).
  • Execute the desired event for the underlying element.
  • In the 'mousedown' hide the top element.

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

I agree, its a quickly implementable to a perplexing issue, but in fact in my implementation of it, I only apply it if the browser is IE, you place it inside this check: if (navigator.appName == 'Microsoft Internet Explorer') { ... logic goes here .. }

This is a creative solution, I like it. The only problem is this adds unnecessary processing to browsers where the point-events do work. It would be great to make this execute conditionally IE browsers only.

This worked for me. I prefer small fixes that I can put into my js code instead adding a lot of polyfills ;)

this works very well! since ie 11 supposedly started supporting pointer-events, I just wrap it inside this clause: if (navigator.userAgent.toLowerCase().indexOf('msie') > 0) THANKS!

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


$("#theTextbox").focus();
$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});
<script src="JS/pointer_events_polyfill.js></script>
document.getElementById("theTextbox").focus();

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.

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

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.

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.

This lets you type the text into the textbox.

This uses javascript and jquery.

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


"you can't expect to see it in IE browsers for another million years."

Documentation of ie9 says it supports this property(i've not tried ie9 yet however).Anyway, i already had ideas in my mind which are given in the links but as i was looking for some css specific solution i cannot use them. I will try to modify the html/js code rather spending time on this problem.Thanks a lot for your time and help

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 also another Javascript solution here.

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.

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>
a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

IE treats this as an disabled element and does not trigger click event. However, disabled is not a valid attribute on an anchor tag. Hence this won't work in other browsers. For them pointer-events:none is required in the styling.

It's worth mentioning that specifically for IE, disabled=disabled works for anchor tags:

UPDATE 1: So adding following rule feels like a cross-browser solution to me UPDATE 2: For further compatibility, because IE will not form styles for anchor tags with disabled='disabled', so they will still look active. Thus, a:hover{} rule and styling is a good idea:

Working on Chrome, IE11, and IE8. Of course, above CSS assumes anchor tags are rendered with disabled="disabled"

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


//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;

});
  • Capture the 'mousedown' event for the top element (the element you want to turn off pointer events).
  • Execute the desired event for the underlying element.
  • In the 'mousedown' hide the top element.

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

I agree, its a quickly implementable to a perplexing issue, but in fact in my implementation of it, I only apply it if the browser is IE, you place it inside this check: if (navigator.appName == 'Microsoft Internet Explorer') { ... logic goes here .. }

This is a creative solution, I like it. The only problem is this adds unnecessary processing to browsers where the point-events do work. It would be great to make this execute conditionally IE browsers only.

This worked for me. I prefer small fixes that I can put into my js code instead adding a lot of polyfills ;)

this works very well! since ie 11 supposedly started supporting pointer-events, I just wrap it inside this clause: if (navigator.userAgent.toLowerCase().indexOf('msie') > 0) THANKS!

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


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

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

I used a similar idea with the disabled attribute. In IE adding the disabled attribute prevents click events, but if there are children they will still trigger the click. covering the children so they are not clickable is a great solution to this. I had to use a background color with opacity 0 to have IE register there was an actual element there.

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

Note
Rectangle 27 0

html css 'pointer events' property alternative for IE?


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?

this is a great solution for some cases but i can't use this in my case.

Note