recognize which span tag triggered javascript function in div

Question

I have a div html element that has a click event set on it inline (not the way I want to do it but legacy code). See here

<div class="myDiv" onclick="triggerJavascript();" id="myDiv">

<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>

What I want to do is recognize which span tag the click event originates from test5, then dont carry out the logic in triggerJavascript function, otherwise complete logic in triggerJavascript.

How can I set this up? I am working with jquery.

Answer 1

You can use event.target in order to access the element. However, in order to get to this element you have to change your onclick attribute a little bit:

<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">

then you can access event in triggerJavascript :

function triggerJavascript(e){
   var element = e.target;
}

See also this answer for a more detailed explanation why event is needed.

Demo ; Demo with text5 check :

<script>function triggerJavascript(e){        
    if(e.target.id === "text5")
        alert("text 5 hit");
    e.stopPropagation();
}
</script>
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
    <span id="text1">Text 1</span> <!-- closing tags -->
    <span id="text2">Text 2</span>
    <span id="text3">Text 3</span>
    <span id="text4">Text 4</span>
    <span id="text5">Text 5</span>
</div>

Answer 2

You can't use onclick="triggerJavascript();" , or the event target (the span which was clicked) will not be passed to the event handler.

Since you state you're using jQuery, use this:

$('#myDiv').click(function(evt) {
    alert("The target is: " + evt.target.id);
});

Answer 3

HTML

<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
  <span id="text1">Text 1<span>
  <span id="text2">Text 2<span>
  <span id="text3">Text 3<span>
  <span id="text4">Text 4<span>
  <span id="text5">Text 5<span>
</div>

JavaScript

<script type="text/javascript">
   function triggerJavascript(event) {
      // event.target will catch the clicked element
      if (event.target.id !== 'text5') {
          // do something
      }
   }
</script>

DEMO

Answer 4

If you can't change the HTML, you could try something like this:

var triggerJavascript = (function(){
    var clicked;
    $("#myDiv span").click(function(e){
        clicked = $(e.target).attr("id");
    });
    return function() {
        if (clicked == "text5") {
            return;
        }
        //do something cool...
    }
})();

Although I guess, there's no guarantee that the jQuery click handler is executed before the actual triggerJavascript logic, so this might not always work correctly.