Javascript 停止事件向父级冒泡_Javascript_Jquery_Html_Css

Javascript 停止事件向父级冒泡

javascript jquery html css

Javascript 停止事件向父级冒泡,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有以下情况 <div id="parent"> <div id="child"></div> </div> 单击#子项时，是否有一种首选方法，使#子项仅处于活动状态。我试过了 $('#child').click(function (e) { e.stopImmediatePropagation(); e.stopPropagation(); e.preventDefault(); }); 但无论我做什么，父项也

我有以下情况

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

单击

#子项

时，是否有一种首选方法，使

#子项

仅处于活动状态。我试过了

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

但无论我做什么，父项也会被激活。请注意，我无法更改CSS

无论如何，我看到的唯一解决方案是添加一个

.active

类，而不是使用

:active

，但我希望可以通过事件传播以某种方式实现

您使用的是一个而不是一个类，因此获得了默认的浏览器行为，这可能是将活动状态传播到活动元素的每个父元素没有说明是否是这种情况

CSS 2.1没有定义处于“：active”或“：hover”状态的元素的父元素是否也处于该状态

您可能希望在元素上设置一个类，如下所示：

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

然后像这样改变你的css

div.active { background-color: green }

您使用的是一个而不是一个类，因此获得了默认的浏览器行为，这可能是将活动状态传播到活动元素的每个父元素没有说明是否是这种情况

CSS 2.1没有定义处于“：active”或“：hover”状态的元素的父元素是否也处于该状态

您可能希望在元素上设置一个类，如下所示：

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

然后像这样改变你的css

div.active { background-color: green }

从：

匹配

：active

的元素的父元素也匹配

：active

因此，似乎没有办法使父项不匹配

：active

。您必须使选择器更具体，或者不使用以下选项中的

：active

：

匹配

：active

的元素的父元素也匹配

：active

因此，似乎没有办法使父项不匹配

：active

。您必须使选择器更具体，或者不使用

：active

有两种方法，第二种。因为，可能有不止一个孩子。另一种方法是使用委托，但要基于您的上下文

TL；DR event.stopPropagation（），截取它并执行您的操作，您可以在结尾处

返回false

，其操作与event.stoppimmediatepropagation（）相同

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

阻止当前事件的进一步传播

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

希望这有帮助。