停止：从传播到父级的活动状态

Posted 2023-02-22

【中文标题】停止：从传播到父级的活动状态

【英文标题】：Stop :active state from propagating to parent

【发布时间】：2015-03-19 01:32:51

【问题描述】：

我有一个父容器，以及该容器内的一个按钮。当您单击父级时，我希望整个事件处于活动状态并应用背景颜色以指示单击已被注册。但是，当我单击孩子时，我只希望孩子处于活动状态，以便背景颜色仅应用于孩子，并且很清楚单击已注册的位置。如何阻止 :active 状态传播到父级？

这是我正在尝试做的一个示例：

HTML

<div class="container">
    <div class="inner-button"> hello </div>
</div>

CSS

.container 
    width: 100%;
    height: 45px;
    border: solid 1px;


.inner-button 
    width: 45px;
    height: 30px;
    border: solid 1px;


.container:active 
    background-color: #00FF00;


.inner-button:active 
    background-color: #FF3300;

在这个例子中，我希望当你点击外部 div 时整个东西都会闪烁绿色，并且只有内部 div 在被点击时会闪烁红色。目前，无论您点击哪里，外部 div 都会闪烁。

Here is the jsfiddle

编辑： 我确实尝试在事件中调用stopPropagation()，但它对状态没有帮助。

【问题讨论】：

我不认为只有 CSS 可以做到这一点。可能需要 javascript。

谢谢@j08691！如何使用 javascript 来实现这一点？我尝试在 click 事件上使用 event.stopPropagation()，但没有帮助

例如：jsfiddle.net/j08691/ny3a6gf1

【参考方案1】：

你不能用那个代码用css实现你的目标，但你可以用他的方式来实现：

<div class="container">
<div class="ut"></div>
<div class="inner"> hello </div>

CSS

.container

position:relative;
width:100px;
height:100px;
border:solid thin;


.inner

position:absolute;
width:35px;
height:35px;
border:solid thin;
z-index:100;


.inner:active

background:red;


.ut

position:absolute;
width:100px;
height:100px;
border:solid thin;


.ut:active

background:green;

你不能用容器来做。您应该添加一个位置相同或更低的部门。

http://jsfiddle.net/fbofpjec/1/

语法错误。

【讨论】：

感谢@MindlessRanger！如果可能的话，我宁愿不改变 DOM 的结构，但也许这是唯一的方法

如果您觉得答案有用，您可以接受答案或点赞。 :D