How to make Internet Explorer emulate pointer-events:none?

by

The Internet Explorer recognizes pointer events: none, but only for SVG elements because pointer-events are only specified for SVG elements in the W3C specification (http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty).

You can try it with something like this…

CSS:

#tryToClickMe{

        pointer-events: none;
        width: 400px;
        height: 400px;
        background-color: red;
    }

HTML:

<svg id="tryToClickMe"></svg>

This works in IE9 and IE10 (I tested it). If you are not yet using SVG elements, then there is the posibility to wrap your existing elements in a SVG. The jQuery library provides a wrap method for that (http://api.jquery.com/wrap/).

There is a very good German article that has broken down the characteristics of the pointer events property: http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html – There you will find (with the help of Google Translate) more information.

Hope I could help

Benny

P.S. If you want to access overlying and underlying objects, then you can use the document.msElementsFromPoint method in IE (http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx). It will give you all layers on a given point in an array.

More Related Contents:

  1. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  2. Is there a way to make text unselectable on an HTML page? [duplicate]
  3. Prevent zoom cross-browser
  4. Can I force a link to open in a specific browser?
  5. Dynamically loading css stylesheet doesn’t work on IE
  6. “pointer-events: none” does not work in IE9 and IE10
  7. Setting minimum size limit for a window minimization of browser?
  8. How to disable elements selection and resizing in contenteditable div?
  9. IE6 Hover Issue
  10. Showing Placeholder text for password field in IE
  11. How to have html popup appear over main html page?
  12. Change from (+) symbol to (-) after click (function(){
  13. ‘innerText’ works in IE, but not in Firefox
  14. How to fix Array indexOf() in JavaScript for Internet Explorer browsers
  15. How to disable HTML links
  16. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  17. Fixing JavaScript Array functions in Internet Explorer (indexOf, forEach, etc.) [closed]
  18. How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?
  19. Can you style an html radio button to look like a checkbox?
  20. How to style “input file” with CSS3 / Javascript? [duplicate]
  21. Changing element style attribute dynamically using JavaScript
  22. How do I clear the content of a div using JavaScript? [closed]
  23. How to get browser width using JavaScript code?
  24. AngularJS: Better way to watch for height change
  25. Cannot access cssRules from local css file in Chrome 64
  26. Open a new javascript window(.open) along with its CSS styling
  27. option.style.display = “none” not working in safari [duplicate]
  28. How to scroll table’s “tbody” independent of “thead”?
  29. How do I detect the inherited background-color of an element using jQuery/JS?
  30. Jquery/Javascript Opacity animation with scroll

Leave a Comment