我想要做的是将一个图像按钮放在比按钮本身更宽的 div 中,当点击外部 div 时,我希望调用图像按钮的 onclick() 函数。我预期下面的 HTML 代码能实现以下效果:当我单击按钮本身时,它应该只弹出 "button clicked" 的警告框;而当我单击外部的 div 时,它应该先弹出 "div clicked",然后是 "button clicked"。问题在于,当我单击 div 时,警告框的顺序是: 先是 "div clicked",然后是 "button clicked",最后还会再次弹出 "div clicked"。而当我单击按钮时,它的警告框顺序是:先是 "button clicked",然后是 "div clicked",最后还会再次弹出 "button clicked" 和 "div clicked"。我不知道自己漏掉了什么,有人能帮忙吗?
<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>