开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜