Home/ Questions/Q 8010009
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:36:38+00:00

What i am trying to do is to put an imagebutton in div which

  • 0

What i am trying to do is to put an imagebutton in div which is wider than the button itself and when the outside div is clicked, i want the image button onclick() function to be called. What i expect from below html code is, when i click the button itself, it should alert only “button clicked”. when i click the outside div, it should alert “div clicked” first, then “button clicked”. The problem is, when i click the div, it alerts: “div clicked” then “button clicked” and then “div clicked” again, in order. When i click the button, it alerts: “button clicked” then “div clicked” then “button clicked” and then “div clicked”.

I could not find what i am missing here, any helps?

<html>
<body>
    <div style="width: 200px; border: 1px solid red;" onclick="alert('div clicked');(document.getElementById('addButton')).click();">
        <input type="button" onclick="alert('button clicked');"
            id="addButton"/>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’ve missed is the fact that some events bubble up the document tree triggering all click handlers of parent elements. To stop it, call stopPropagation on the event object.

    <input type="button" onclick="event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);alert('button clicked');"
        id="addButton"/>

    (in old IE there is no stopPropagation, you need to set event.cancelBubble=true)

    • 0