使用 JavaScript 模拟 OnClick 事件

simulating onclick event with javascript

本文关键字：事件 OnClick 模拟 JavaScript 使用      更新时间：2023-09-26

我想做的是在div中放置一个比按钮本身宽的图像按钮，当单击外部div时，我希望调用图像按钮onclick（）函数。我对下面的 html 代码的期望是，当我单击按钮本身时，它应该只提醒"按钮单击"。当我单击外部div 时，它应该首先提醒"div 单击"，然后"按钮单击"。问题是，当我单击div 时，它会提醒："div 单击"然后"按钮单击"，然后再次"div 单击"，按顺序。当我单击按钮时，它会发出警报："按钮

单击"然后"div单击"，然后"按钮单击"，然后"div单击"。我

在这里找不到我错过的东西，有什么帮助吗？

<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>

您错过了这样一个事实，即某些事件在文档树中冒泡，触发了父元素的所有单击处理程序。若要停止它，请在事件对象上调用 stopPropagation。

<input type="button" onclick="event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);alert('button clicked');"
        id="addButton"/>

（在旧的IE中没有stopPropagation，你需要设置event.cancelBubble=true）

在Internet Explorer中，你可以简单地做

myElement.click();

但是，W3标准有点复杂。以下代码应该适用于其他浏览器：

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
myElement.dispatchEvent(evt);
  • document.createEvent
  • 鼠标事件

另请参阅此问题：如何模拟对锚标记的点击？

使用 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>
你需要

避免从Javascript冒泡的事件，如下所示：

<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>

测试.. :)

相关文章：