OnClick Event gets fired twice

Question

I have following legacy code which gets fired twice only in firefox, please let me know what needs to be done

<div onclick="$get('imgLookUpIcon').click();" style="width: 25px; height: 56px;">
    <span style="visibility: none;"></span>
    <span></span>
    <img src="./images/lookup.gif" id="imgLookUpIcon" style="vertical-align: middle;" onclick="javascript:ABCDEF(event,this);"/>
</div>

Kindly do let me know what will be the cause two solutions what i think of are

Remove the click in the img
Stop the propagation.

Regards Selva Kumar J

May I suggest you to first try those two possible solutions you mentioned? It's a good way to learn from your mistakes if you're able to solve them yourself. If you don't find a solution, we're here to help. — regapictures, Dec 03 '15 at 08:34
I assume ABCDEF gets called twice. Have you tried "javascript:$get('imgLookUpIcon').click(); return false;" in " — Jodi Supporter, Dec 03 '15 at 08:35
both your solutions are wrong. Hint: child nodes raise parent click — Gene R, Dec 03 '15 at 08:38
I don't think you need `onclick="$get('imgLookUpIcon').click();"` is click event not fired on `img` — Identity1, Dec 03 '15 at 08:52

score 0 · Accepted Answer · answered Dec 03 '15 at 09:14

You have to use event.stopPropagation() that stop the event propagation to the parent tree.

Try the FIDDLE,

As you have not provide the $get implementation, i have coded as a mock function like below

  function $get(idselector) {
    alert('$get');
    return $('#' + idselector);
  }

  function ABCDEF(event, object) {
    alert('ABCDEF');
    event.stopPropagation(); // try commenting this will reproduce your issue
  }

Hope it works for you

OnClick Event gets fired twice

1 Answers1

Linked