simulating onclick event with javascript

javascript click simulate
Use the fork Luke picture Use the fork Luke · May 31, 2012 · Viewed 8.6k times · Source

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>

Answer

Rafael picture Rafael · May 31, 2012

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)

Related questions

Simulate a click on 'a' element using javascript/jquery

I am trying to simulate a click on on an element. HTML for the same is as follows <a id="gift-close" href="javascript:void(0)" class="cart-mask-close p-abs" onclick="_gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_…

Read More
Simulate click at x/y coordinates using javascript

How can I simulate a click at x/y co-ordinates using javascript or jquery? I will use the script multiple times and I want the script to click on postion one then postion two then three then four and so …

Read More
javascript simulate mouse click on specific position

I need to now how to fire a mouse click event on a button automatically. I have this but doesn't work :( window.setInterval(function() { simulateClick(); }, 2000); function simulateClick() { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", false, false, window, 0, 684, 571, 684, 508, false, false, …

Read More