Оболочка с onclick имеет приоритет над ребенком с href

Question

У меня есть окно-обертка, в котором есть событие onclick, позволяющее сделать целую коробку доступной для перехода на другую страницу, что-то вроде этого:

<div onclick="window.location='http://dom.com/page1/'">
    <p>Title</p>
    <img alt='img' />
    <p>Some text</p>
    <a href="http://dom.com/page2/">My link</a>
    <p>Some more text</p>
</div>

Проблема в том, что дочерняя ссылка никогда не перейдет наpage2, потому что родительский onclick имеет приоритет, и где бы вы ни щелкнули по полю, вы всегда окажетесь на странице 1.

Есть ли способ решить эту проблему, я должен иметь возможность перейти на страницу 1 при нажатии в любом месте наполе, но переходя на страницу 2 при нажатии на ссылку.

Answer 1

Обработчик "onclick" - old-school.Я бы порекомендовал скачать и включить jQuery в ваш HTML, а затем использовать его так:

<script src="main.js"></script>

main.js:

jQuery( document ).ready(function(){
  jQuery( "div" ).click( function( e ){
    window.location='http://dom.com/page1/';
    e.preventDefault();
  };
} );

Вы, вероятно, неt нужен e.preventDefault ();строка, так как вы изменяете местоположение браузера до его запуска.

Также рекомендуется избегать применения обработчиков кликов к тегам.Возможно, вам следует использовать два тега и CSS для правильного позиционирования и наложения друг на друга.

Answer 2

Один из способов сделать это - использовать тег привязки вместо div и сделать его элементом уровня блока:

<a href="http://dom.com/page1/" style="display: block; text-decoration: none;">
   <p>Title</p>
   <img alt='img' />
   ...
</a>

Это также будет работать, когда JS отключен, и единственным недостатком является то, что он не очень элегантный.

Answer 3

Вы должны изучить захват событий и всплытие событий. Здесь хорошая статья для начала.