阻止事件冒泡到父母

Question

我有以下情况

<div id="parent">
    <div id="child"></div>
</div>

还有一些css

div:active { background-color: green }

点击#child时，是否有首选方式只有#child获得active。我试过了

$('#child').click(function (e) {
    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();
});

但无论我做什么，#parent也会获得active。请注意，我无法更改CSS！

无论如何，我看到的唯一解决方案是使用.active添加:active类，但我希望可以通过事件传播以某种方式完成。

DEMO

Answer 1

来自CSS spec：

  

与:active匹配的元素的父级也匹配:active。

所以不，似乎没有办法让父不匹配:active。您必须使选择器更具体或不使用:active。

Answer 2

您正在使用pseudo class而不是类，因此，获取可能的默认浏览器行为，以将活动状态传播到活动元素的每个父级。 CSS 2.1＆amp; CSS3并未指定是否为案例

  

CSS 2.1没有定义元素的父级是否为“活跃”。或者＆＃39;：悬停＆＃39;也是在那个州。

你可能想在你的元素上设置一个类：

$('#child').click(function (e) {
    $('#child').addClass('active');
});

并像这样改变你的CSS

div.active { background-color: green }

Answer 3

有两种方法，第二种方法。因为，可能有不止一个孩子。另一种方法是使用.on()进行委派，但要根据您的具体情况进行委派。

<强> TL; DR event.stopPropagation（），拦截它并进行操作，最后你可以return false与event.stopImmediatePropagation（）一样。

event.preventDefault()

  

如果事件可以取消，则取消该事件，而不会停止事件的进一步传播。

event.stopPropagation()

  

防止进一步传播当前事件。

event.stopImmediatePropagation()

  

如果多个侦听器附加到同一事件类型的同一元素，则会按照添加它们的顺序调用它们。如果在一次这样的调用期间调用event.stopImmediatePropagation（），则不会调用剩余的侦听器。

希望这有帮助。