如何通过jQuery仅监听父元素的CSS animationend事件

你遇到的这个问题其实是DOM事件冒泡导致的——子元素的animationend事件会顺着DOM树向上冒泡，所以父元素不仅会收到自己的动画结束事件，还会接收到子元素冒泡上来的那一个，就出现了触发两次的情况。

这里有几个靠谱的解决办法，你可以根据自己的场景选：

1. 判断事件源是否为父元素本身 #

在父元素的事件监听回调里，通过对比target和currentTarget来区分：

• target是实际触发事件的元素（可能是父元素，也可能是子元素）
• currentTarget是绑定事件监听的元素（也就是父元素本身）

代码示例：

const parent = document.querySelector('.parent-element');
parent.addEventListener('animationend', (e) => {
  // 只有当触发事件的是父元素自己时，才执行逻辑
  if (e.target === e.currentTarget) {
    console.log('父元素动画已结束');
    // 你的业务逻辑写在这里
  }
});

这种方法不需要修改子元素的代码，很适合不想动子元素事件绑定的场景。

2. 阻止子元素的事件冒泡 #

直接给子元素绑定animationend事件，在回调里调用stopPropagation()阻止事件向上冒泡，这样父元素就只会收到自己的动画结束事件了。

代码示例：

const child = document.querySelector('.parent-element .child-element');
child.addEventListener('animationend', (e) => {
  e.stopPropagation();
});

这个方法比较彻底，直接切断了子元素事件的传播路径。

3. 通过动画名称筛选 #

如果父元素和子元素的动画有不同的名称（比如父元素动画叫parent-fade，子元素叫child-slide），可以通过事件对象的animationName属性来精准判断：

CSS示例：

.parent-element {
  animation: parent-fade 2s forwards;
}
.child-element {
  animation: child-slide 2s forwards;
}

JavaScript示例：

const parent = document.querySelector('.parent-element');
parent.addEventListener('animationend', (e) => {
  if (e.animationName === 'parent-fade') {
    console.log('父元素的动画结束了');
    // 执行你的逻辑
  }
});

这种方法逻辑清晰，尤其适合多个动画共存的复杂场景。

内容的提问来源于stack exchange，提问作者user13286