Обработка нажатия на элемент и его родитель
 

Простая проблема вроде бы, но вот решить не получается.

Есть <div>, в котором есть <a>. У каждого из них есть свой id. Есть скрипт, который по разному реагирует на клик по div'у и по a.

Проблема: после клика на <a> происходит обработка его, а заетм еще и обработка клика по <div>.

Наглядная иллюстрация: http://jsfiddle.net/tLGd7/

Помогите исключить обработку нажатия на div, если было осуществлено нажатие на a.

klev2004,

<style>
#id1{
    background-color: yellow;
    width: 100%;
    height: 30px;
}
</style>
<div id="id1">
    <a href="#" id="id2">link</a>
</div>
<script>
window.onload = function () {
    document.getElementById("id1").onclick = function (e) {
         e = e || event;
         target = e.target || e.srcElement;
         if (target.tagName == "A") { alert("линк"); }
         else { if (target.id == "id1") { alert("div"); } }
    }
}
</script>

lord2kim, спасибо!

klev2004,

В данной ситуации лучше использовать stopPropogation (отменяет всплытие события наверх).

<div id="id1">
    <a href="#" id="id2">link</a>
</div>

$('#id1').click(function(){
    alert('id1');                
});

$('#id2').click(function(event){
    alert('id2');
    event.stopPropogation();
});