带有事件的嵌套元素[重复]

Posted 2023-05-09

【中文标题】带有事件的嵌套元素[重复]

【英文标题】：Nested element with events [duplicate]

【发布时间】：2014-11-25 07:28:41

【问题描述】：

我有一个像这样的元素，

<div class='outer'>
    <div class='inner'></div>
</div>

我在这个 DOM 元素上有 2 个事件，

$('.outer').click(function(e)
    console.log("outer has been triggered");
);

$('.inner').click(function(e)
    console.log("inner has been triggered");
);

现在，如果单击.outer 我在控制台中得到“外部已被触发”，如果我单击.inner 我得到“外部已被触发”和“内部已被触发”，有没有办法仅在内部单击时触发内部事件并将其嵌套在外部 div 中？

这是一个例子，http://jsbin.com/bewukakakuju/2/edit

【问题讨论】：

e.stopPropagation(); jsbin.com/meyulefoyave/1/edit。更多信息在这里：api.jquery.com/event.stoppropagation

另一个副本：***.com/q/1369035/218196

【参考方案1】：

$('.inner').click(function(e)
    console.log("inner has been triggered");
    e.stopPropagation();
);

【讨论】：

没有解释的代码很少有用。