<a> in <div> in <li> - when I click the list item, the link opens
I have built an expandable tree, using nested UL's. Here is the simplified code of what I have:
<li>
<div><a href="somepage">Link</a></div>
<ul>...</ul>
</li>
The <li>
has a padding-left
of 20px and a background image of either a plus or a minus. I have a click event on the <li>
, to toggle a class and save the current state in a cookie. When I click it, it seems as if the <a>
is clicked - it gets a dashed outline and the page location changes. However, the <li>
click event is also executed - the tree expands. I would like to only have the <li>
click event executed.
It works fine in IE8+, Chrome and Firefox, just not in IE7. In case it is of any interest: I use jQuery to bind the click event to the <li>
.
EDIT: As suggested in a comment by T.J. Crowder, I added a jsfiddle example here. EDIT 2: changed the jQuery selector. Still same behaviour, though.
UP开发者_Python百科DATE: It is actually IE9 in IE7 mode, would that make a difference?
Your example is wrong: Div is not allowed within ul.
However, you can try to prevent the click event of the link.
$(function() {
$('#tree div').click(function() {this.style.background = '#00FF00'; });
$('#tree a').click(function(event) {event.preventDefault(); });
});
It seems that the solution is quite easy: use actual IE7, instead of IE9's IE7 mode.
Sorry to bother you, folks!
精彩评论