Question

只是一个简单的问题。我在使用onclick javascript的div中遇到问题。当我点击内部div时，它应该只触发它的onclick javascript，但外部div的javascript也被触发了。如何在不触发外部div的javascript的情况下点击内部div？

<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>

Answer 1

基本上javascript中有两个事件模型。 事件捕获和事件冒泡。在事件冒泡中，如果单击div内部，则首先触发内部div单击事件，然后单击外部div单击。在事件捕获中，首先触发外部div事件，然后触发内部div事件。要停止事件传播，请在单击方法中使用此代码。

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

Answer 2

查看有关事件传播的信息here

特别是你需要在事件处理程序中使用这样的代码来阻止事件传播：

function myClickHandler(e)
{
    // Here you'll do whatever you want to happen when they click

    // now this part stops the click from propagating
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Answer 3

只需添加以下代码：

window.event.stopPropagation();

Answer 4

来自内部div的onclick函数的

return false;：

<div onclick="alert('inner'); return false;" ...

您正在处理的内容称为event propagation。

Answer 5

这是事件冒泡的情况。

您可以使用

e.cancelBubble = true; //IE

和

e.stopPropagation(); //FF

Answer 6

基于webkit的浏览器的另一种方法：

<div onclick="alert('inner'); event.stopPropagation;" ...

Answer 7

Here是一些帮助您理解javascript事件冒泡的参考资料。

Answer 8

这非常有帮助，但它对我没用。

我所做的是here。

所以我在外部onclick事件中添加了一个条件：

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}

Answer 9

您可以使用

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });

Answer 10

这在Jquery中对我有用：

$('#outer_element').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("Outer element is clicked")                       
});

这样，如果当前目标与外部div不同，它将不执行任何操作。您可以在子元素上实现常规函数。

如何：使用onclick javascript在另一个div中使用onclick进行div

11 个答案: