<a> в <div>в <li>- когда я нажимаю на элемент списка, открывается ссылка

Question

Я построил расширяемое дерево, используя вложенные UL. Вот упрощенный код того, что у меня есть:

<li>
    <div><a href="somepage">Link</a></div>
    <ul>...</ul>
</li>

<li> имеет padding-left размером 20 пикселей и фоновое изображение плюс или минус. У меня есть событие click на <li>, чтобы переключить класс и сохранить текущее состояние в cookie. Когда я щелкаю по нему, кажется, что нажата кнопка <a> - она ​​получает пунктирный контур и местоположение страницы изменяется. Тем не менее, событие <li> click также выполняется - дерево расширяется. Я хотел бы только выполнить событие клика <li>.

Отлично работает в IE8 +, Chrome и Firefox, только не в IE7. В случае, если это представляет какой-либо интерес: я использую jQuery для привязки события click к <li>.

---

РЕДАКТИРОВАТЬ : Как указано в комментарии T.J. Crowder, я добавил пример jsfiddle здесь . РЕДАКТИРОВАТЬ 2: изменил селектор jQuery. Тем не менее такое же поведение.

---

ОБНОВЛЕНИЕ : Это на самом деле IE9 в режиме IE7, это изменит?

Answer 1

Кажется, что решение довольно простое: используйте реальный IE7 вместо IE7 в IE9.

Извините, что беспокою вас, ребята!

Answer 2

Ваш пример неверен: Div не допускается в пределах ul.

Однако вы можете попытаться предотвратить событие щелчка по ссылке.

$(function() {
    $('#tree div').click(function() {this.style.background = '#00FF00'; });
    $('#tree a').click(function(event) {event.preventDefault(); });
});