Как заставить браузер обрабатывать только верхнюю ссылку, если 2 элемента кликабельны?

Question

Скажите, у меня есть следующий код:

<div onclick='location.href="http://www.example.com/"'>
  <a href='#' onclick='alert("blah")'>click</a>
</div>

Есть ли способ оценивать привязку только тогда, когда я щелкаю текст "click" и не оцениваю "клик" div?

Answer 1

См. http://www.quirksmode.org/js/events_order.html.

<div onclick='location.href="http://www.example.com/"'>
  <a href='#' onclick='alert("blah"); event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation(); return false;'>click</a>
</div>

• event.cancelBubble для IE
• event.stopPropagation() - это W3C
• return false означает отменить ссылку href.

Answer 2

Вы можете остановить распространение события, вернув false из обработчика события щелчка якоря.

<div onclick='location.href="http://www.example.com/"'>
  <a href='#' onclick='alert("blah"); return false;'>click</a>
</div>

Вы пометили этот вопрос с помощью jQuery. В этом случае вы должны использовать ненавязчивый Javascript так:

<div id="someid">
  <a href="#">click</a>
</div>

с:

$(function() {
  $("#someid").click(function() {
    window.location.href = "http://www.example.com";
  });
  $("#someid a").click(function() {
    alert("blah");
    return false;
  });
});

гораздо более чистое решение.