simulating onclick event with javascript

Question

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>

stackoverflow.com/questions/2364629/… - possible duplicate — Carlo Moretti
– Carlo Moretti, Commented May 31, 2012 at 8:12

Rafael · Accepted Answer · 2012-05-31 08:16:41Z

2

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)

answered May 31, 2012 at 8:16

Rafael

18.5k5 gold badges60 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:22:11Z

1

In Internet Explorer, you can simply do

myElement.click();

However, the W3 standard is a bit more complex. The following code should work for other browsers:

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
myElement.dispatchEvent(evt);

See also this question: How can I simulate a click to an anchor tag?

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered May 31, 2012 at 8:24

user2428118

8,1344 gold badges47 silver badges74 bronze badges

Comments

rt2800 · Accepted Answer · 2012-05-31 08:17:55Z

0

use window.event.stopPropagation(); like

<div style="width: 200px; border: 1px solid red;" onclick="alert('div clicked');(document.getElementById('addButton')).click();">
    <input type="button" value="X" onclick="alert('button clicked');window.event.stopPropagation();"
        id="addButton"/>
</div>

answered May 31, 2012 at 8:17

rt2800

3,0552 gold badges22 silver badges26 bronze badges

Comments

pad31 · Accepted Answer · 2012-05-31 09:18:24Z

0

you need to avoid the event bubbling from Javascript like so :

<html>
<body>
    <script type="text/javascript">
        function clickOnDiv(e){
            alert('Div clicked.');
            document.getElementById('addButton').click();
            e.preventDefault();
            return false;
        }

    function clickOnButton(e){
        e.preventDefault();

        // This line to prevent event bubbling
        e.stopPropagation() ? e.stopPropagation() : (e.cancelBubble=true);

        alert('Button clicked.');
        return false;
    }


    </script>
    <div id='maDiv' style="width: 200px; border: 1px solid red;">
        <input type="button" value="Click Me !" id="addButton"/>
    </div>
    <script>
        (function(){
            document.getElementById('addButton').onclick = clickOnButton;
            document.getElementById('maDiv').onclick = clickOnDiv;
        })();
    </script>
</body>
</html>

Tested.. :)

edited May 31, 2012 at 9:18

answered May 31, 2012 at 8:37

pad31

581 silver badge7 bronze badges

1 Comment

pad31 Over a year ago

Also, I refactored your code in order it will be more compliant with DOM Event model level 2..

Collectives™ on Stack Overflow

simulating onclick event with javascript

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related