CODEWITHSUNDEEP
javascriptclicksimulate
Use the fork Luke
Use the fork Luke

Reputation: 207

simulating onclick event with javascript

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>

Upvotes: 3

Views: 8756

Answers (4)

pad31
pad31

Reputation: 58

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.. :)

Upvotes: 0

user2428118
user2428118

Reputation: 8104

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?

Upvotes: 1

rt2800
rt2800

Reputation: 3045

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>

Upvotes: 0

Rafael
Rafael

Reputation: 18522

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)

Upvotes: 2

Related Questions