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>