Question

我想要做的是在div中放置一个比按钮本身更宽的图像按钮，当点击外部div时，我想要调用图像按钮onclick（）函数。我对html代码的期望是，当我点击按钮本身时，它应该仅警告“点击按钮”。当我点击外部div时，它应首先警告“div clicked”，然后点击“button clicked”。问题是，当我点击div时，它会提示：“div 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>

Answer 1

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

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

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

Answer 2

在Internet Explorer中，您只需执行

即可

myElement.click();

然而，W3标准有点复杂。以下代码适用于其他浏览器：

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

另请参阅此问题：How can I simulate a click to an anchor tag?

Answer 3

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

Answer 4

你需要避免像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>

经过测试......：）

使用javascript模拟onclick事件

4 个答案:

使用javascript模拟o​​nclick事件

4 个答案:

使用javascript模拟onclick事件