Как лучше всего извлечь вложенные кликабельные элементы?

Question

У меня есть ситуация, которая выглядит примерно так

<div class="x" href="foo">
    <div class="y" href="bar"></div>
    <div class="z"></div>
    <div class="y" href="baz"></div>
    <a href="#">fooz</a>
</div>

x - значок, который должен быть кликабельным. Проблема в том, что значок также содержит ссылки, которые также должны быть кликабельными. Кроме того, y и z кликабельны. К сожалению, переход по дочерним ссылкам приводит только к нажатию кнопки x. Как мне лучше всего справиться с чем-то подобным?

Answer 1

Продолжая мой предыдущий комментарий (при условии, что мое понимание вашего сценария было правильным), вот ваше решение: http://jsfiddle.net/chricholson/7yzxQ/12/

Он включает использование stopPropagation для предотвращения обнаружения щелчка вверх по древовидной структуре http://api.jquery.com/event.stopPropagation/

Answer 2

Я думаю, что вы не должны помещать <a> теги в другой <a>.Решением здесь будет либо использование javascript и всплывающих событий, либо вы должны разделить ссылки и разместить / стилизовать их так, чтобы вы увидели один цельный значок.В html вы бы на самом деле строили его из отдельных элементов.

Лично я бы пошел по пути javascript, так как он намного проще.

Answer 3

Это не работает и не является действительным html, потому что вложенные a -элементы не допускаются. Для решения необходима дополнительная информация.