By anu


2011-05-02 08:43:30 8 Comments

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?

12 comments

@Z.T 2018-03-08 06:05:43

I faced similar issues:

  1. I faced this issue in a directive, i fixed it adding a as its parent element and making pointer-events:none for that

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

@user3657756 2018-02-21 12:55:21

You can also just "not" add a url inside the <a> tag, i do this for menus that are <a> 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 <ul> <li> list i just remove it.

@Rafa Baldayo 2017-07-18 10:10:51

Best solution:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

Runs perfectly on all browsers

@don_mega 2017-09-20 15:41:51

Except for IE version < 11, where pointer events isn't supported. I think you missed the point.

@Nikhil 2013-08-08 04:48:26

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

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

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"

@certainlyakey 2016-09-05 07:29:33

This didn't work for me. In IE9-10 onclick functions still do execute.

@Medde 2016-05-20 14:29:26

Use OnClientClick = "return false;"

@Mai 2015-02-26 12:45:00

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.

@Graham P Heath 2015-03-25 16:44:54

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.

@Blake Plumb 2015-04-27 22:54:42

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.

@yves.beutler 2013-10-30 13:12:12

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 >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

Maybe it's useful for you.

@Kyle 2011-05-02 09:02:50

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.

@anu 2011-05-02 09:16:06

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

@Sophie Alpert 2011-09-30 15:39:17

The page was down when I checked, but here's some code the author wrote for the ext.js library that accomplishes the same: code.google.com/p/ext-ux-datadrop/source/browse/trunk/src/…

@user123444555621 2012-01-23 23:43:23

While this workaround will forward the event, it will not forward the actual click. For example, an input field will fire a focus event without gaining focus. A button will fire a click event but not be clicked, etc...

@vulcan raven 2012-09-28 07:40:30

At W3C, this issue went under debate due to click-hijacking. Rule of thumb: as soon as W3C publish the candidate recommendation, IE team will implement it & there's always a lesson in haste makes waste. Besides, Mozilla said it all "Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4."

@Tim 2013-10-03 22:01:23

According to caniuse.com, CSS pointer events are coming to IE 11. caniuse.com/#feat=pointer-events

@Marc Uberstein 2013-12-03 10:00:07

I made a simpler js version (not using css pointer events) - getting the element by using elementFromPoint jsfiddle.net/3NDaL/3 - hope it will help

@Chad Scira 2013-12-06 22:54:29

IE11 now supports pointer-events: none; :D

@eyurdakul 2014-01-03 13:42:32

downvoted cause there is no css only solution for ie8

@scumah 2014-03-25 15:30:11

That's not a reason to downvote an answer @eyurdakul

@eyurdakul 2014-03-25 16:26:29

yeah, you are right. i'll upvote this as soon as you edit your answer but i've managed to find a css-only solution for this problem.

@Sham 2014-04-09 04:43:35

pointer-events: none; is working fine in IE11

@ProblemsOfSumit 2014-06-17 08:07:56

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

@ProblemsOfSumit 2014-06-17 08:08:41

@eyurdakul why don't you share your solution then..?

@Kyle 2014-06-17 08:54:58

@Sumit: I guess I vastly underestimated Microsoft on this one.

@eyurdakul 2014-06-17 13:37:14

@Sumit, i don't have one. There isn't any.

@ProblemsOfSumit 2014-06-17 13:42:30

@KyleSevenoaks i guess everyone underestimated Microsoft. Current IE development is awesome, especially status.modern.ie. They only need to kill IE8 and 9 ASAP and we're good to go into sweet heaven of modern development!

@Szymon Toda 2014-09-04 08:16:32

@KyleSevenoaks "you can't expect to see it in IE browsers for another million years." - IE 11 has it

@Kyle 2014-09-05 06:38:38

Yes, yes we've covered this ground. This answer was constructed during the time when Microsoft were considered to be less than stellar at browser building. Times have changed, but the answer remains.

@Khachatur Stepanyan 2019-04-11 21:08:40

it still does not work neither in EDGE nor in IE

@MarzSocks 2013-07-31 18:26:04

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;

});

@dippas 2014-12-11 11:48:13

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

@Trevor 2015-01-16 19:04:14

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.

@MarzSocks 2015-01-17 06:56:53

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

@Hank 2015-08-21 16:40:37

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!

@Kent Mewhort 2013-07-19 10:17:38

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

@Colin DeClue 2013-08-12 20:16:27

This doesn't work if the elements are anchor tags, I believe. At least, it didn't work for me.

@obiuquido144 2012-05-21 21:41:40

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?

@eyurdakul 2014-03-25 16:27:50

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

Related Questions

Sponsored Content

16 Answered Questions

[SOLVED] When to use margin vs padding in CSS

  • 2010-02-03 03:20:12
  • Alex Angas
  • 747003 View
  • 2235 Score
  • 16 Answer
  • Tags:   css padding margin

32 Answered Questions

[SOLVED] Font scaling based on width of container

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1509462 View
  • 2184 Score
  • 28 Answer
  • Tags:   html css opacity

24 Answered Questions

[SOLVED] How do I style a <select> dropdown with only CSS?

35 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

18 Answered Questions

[SOLVED] How to disable resizable property of textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1243869 View
  • 2468 Score
  • 18 Answer
  • Tags:   html css

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

38 Answered Questions

[SOLVED] How do I vertically center text with CSS?

31 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1775924 View
  • 2917 Score
  • 31 Answer
  • Tags:   css css-selectors

26 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

Sponsored Content