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?
This question is related to
html
css
internet-explorer
browser
cross-browser
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?
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.
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"
Here's a small script implementing this feature (inspired by the Shea Frederick blog article that Kyle mentions):
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.
Use OnClientClick = "return false;"
Here is another solution that is very easy to implement with 5 lines of code:
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;
});
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.
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
Best solution:
.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}
Runs perfectly on all browsers
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.
Source: Stackoverflow.com