3

我想要做的是在比按钮本身更宽的 div 中放置一个图像按钮，当单击外部 div 时，我希望调用图像按钮 onclick() 函数。我对下面的 html 代码的期望是，当我单击按钮本身时，它应该只提醒“单击按钮”。当我单击外部 div 时，它应该首先提示“div clicked”，然后是“button clicked”。问题是，当我单击 div 时，它会按顺序发出警报：“div clicked”然后“button clicked”，然后再次“div clicked”。当我单击按钮时，它会发出警报：“单击按钮”然后“单击 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>
4

4 回答 4

2

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

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

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

于 2012-05-31T08:16:41.653 回答
1

在 Internet Explorer 中，您可以简单地执行

myElement.click();

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

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
myElement.dispatchEvent(evt);

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

于 2012-05-31T08:24:39.020 回答
0

使用 window.event.stopPropagation(); 像

<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>
于 2012-05-31T08:17:55.850 回答
0

您需要避免像这样从 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>

测试.. :)

于 2012-05-31T08:37:47.083 回答