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>
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)
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);
- document.createEvent
- Mouse Events
See also this question: How can I simulate a click to an anchor tag?
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>
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.. :)
