How to determine if child was clicked in Jquery

Is there a ways in jQuery to tell which child was clicked if the onclick event was binded to the parent?

For instance:

  $('#daddy').click(function () {
    // if($("#son").isClicked()){return true;}
    //return false;
  });

and the markup looks like:

<div id="daddy">
  <span id="son"></span>
  <span id="daughter"></span>
</div>

Answers


The event handler you pass to click will receive an event object as its first argument. The target of the event (i.e. the element that initiated the event) will be specified there.

Here's an example from the jQuery documentation:

<!DOCTYPE html>
<html>
<head>
  <style>
span, strong, p { 
  padding: 8px; display: block; border: 1px solid #999;  }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
<script>

$("body").click(function(event) {
  $("#log").html("clicked: " + event.target.nodeName);
});

</script>  
</body>
</html>

You can use the event.target to determine what was clicked:

  $('#daddy').click(function (e) {
      alert(e.target.id); // The id of the clicked element
  });

Here's a simple example.


This should be a different perspective at least:

$('#parent').on("click", function(evt) {
        evt.stopPropagation();
        if($.inArray(evt.currentTarget, $(this).children())){
            console.log(evt.currentTarget);
        }
});

check this demo out

$(function() {
    $('#parent').delegate('a', 'click', function(evt) {
        debugger;
        evt.stopPropagation();
        alert($(evt.currentTarget).attr('id'));
    });
});‚Äč

Try this for an alternative

$('#daddy span').click(function () {
    var clicked = $(this).attr('id');
    if(clicked == "son"){
        return true;
    }
    return false;
});

use event.target to get the really clicked node:

$('#daddy span').on('click',function(event){
    if(event.target.nodeName=='BUTTON'){//Was clicked a button
        ....
    }
    if(event.target.id=='id'){//Was clicked #id
        ....
    }
    ...
});

Need Your Help

How do I rename an attribute code in Magento?

magento attributes magento-1.4 entity-attribute-value

I want to rename an existing attribute's code to something else. The reason is because the attribute field is filled out for 300+ products and I don't want to have to re-import all of those just be...

tabindex in CSS

html css keydown

Is it possible to control tabindex with CSS and if yes, which browsers support it and on which elements?