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

User · Answer

I ve found another solution to solve this problem  I use jQuery to set the href-attribute to javascript    not      or the browser will reload the page  if the browser window width is greater than 1 000px  You need to add an ID to your link  Here s what I m doing      get current browser width var width     window  width    if  width  gt   1001            refer link to nothing        a linkID   attr  href    javascript           Maybe it s useful for you

User · Answer

Best solution    disabled filter  alpha opacity 50  opacity  0 5 z-index  1 pointer-events  none     Runs perfectly on all browsers

User · Answer

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

User · Answer

It s worth mentioning that specifically for IE  disabled disabled works for anchor tags    lt a href  contact html  onclick  unleashTheDragon     disabled  disabled  gt Contact lt  a gt    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   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     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              Working on Chrome  IE11  and IE8  Of course  above CSS assumes anchor tags are rendered with disabled  disabled

User · Answer

I faced similar issues    I faced this issue in a directive  i fixed it adding a  as its parent element and making pointer-events none for that   The above fix did not work for select tag  then i added cursor text  which was what i wanted  and it worked for me   If a normal cursor is needed you could add cursor default

User · Answer

Here s a small script implementing this feature  inspired by the Shea Frederick blog article that Kyle mentions     Pointer Events Polyfill

User · Answer

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

User · Answer

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

User · Answer

You can also just  not  add a url inside the  lt a gt  tag  i do this for menus that are  lt a gt  tag driven with drop downs as well   If there is not drop down then i add the url but if there are drop downs with a  lt ul gt   lt li gt  list i just remove it

User · Answer

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

User · Answer

Use OnClientClick    return false

User · Answer

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    lt script src  JS pointer events polyfill js gt  lt  script gt   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

[html] css 'pointer-events' property alternative for IE

Examples related to html

Examples related to css

Examples related to internet-explorer

Examples related to browser

Examples related to cross-browser