点击链接不应该触发父母onclick-event

Question

I've got the following code:

<div onclick="alert('div event');" style="cursor:pointer">
    some text
    <a href="asd.php" id="link">click</a>
</div>

When somebody clicks on the link the javaschipt event is triggered. I want that the event is only triggers if somebody clicks on the text or on the empty space inside the div container; and not if somebody clicks on the link.

Is it possible to call a function when the event is triggered, which checks on which elements the user has clicked. something link

onclick="foo(caller);"

and

function foo(element){
    if(element!='link'){
        alert('yes');   
    }
} 

Answer 1

Add a click handler to your link and stop event bubbleing to the parent div. Like this:

$('#link').click(function(e) {
  e.stopPropagation();
});

Answer 2

$(function (){
  $('#link').click(function (e){ e.stopPropagation(); /*do other thing*/});
})

Answer 3

OnClick event you can pass the current object type. something like

onclick=foo(this)

The function foo looks like

 function foo(obj) {    
      if(obj.tagName != 'A') {
       alert('Yes')    
      } 
}

Answer 4

使用unbind http://api.jquery.com/unbind/