Javascript e、 停止播放不起作用

我向元素添加了一个

transionend

回调事件。该元素有一个子元素，该子元素也有一个转换

问题是，当子级的转换结束时，会调用其“父级

transitionend

事件”

我尝试将

e.stopPropagation（）

添加到

transitionend

事件中，但没有效果。它似乎什么都没做。如何防止孩子完成转换时发生

transitionend

事件

var outer=document.getElementById（'outer'），
content=document.getElementById（'content'），
outerButton=document.getElementById（'outerButton'），
contentButton=document.getElementById（'contentButton'）；
outerButton.addEventListener（'click'，function（）{
outer.style.width=（outer.style.width=='300px'）？'500px'：'300px'；
});
contentButton.addEventListener（'单击'，函数（））{
content.style.width=（content.style.width=='150px'）？'250px'：'150px'；
});
if（document.documentElement.style中的（'transition'））{
外部.addEventListener（'transitionend'，函数（e）{
警报（“transitionend”）；
console.log（'before'）；
e、 停止传播（）；
console.log（'after'）；
});
}

#外部{
宽度：500px；
背景颜色：橙色；
过渡：宽度为0.7s，易于进出；
}
#内容{
背景图像：url（“http://i.imgur.com/nri7bYd.jpg");
高度：200px；
宽度：250px；
过渡：宽度为0.7s，易于进出；
}

这是一些内容
更改外部（橙色）元素的宽度




更改内容（图像）元素的宽度

，据我所知，您正在寻找以下内容：

---

我从问题和评论中了解到，您不希望transitionend事件发生在子元素上

从上面的代码可以看出，由于您已将转换结束事件应用于父级（在本例中为外部），因此这也将捕获所有子事件

处理此问题的最佳方法是在方法中添加检查

if ('transition' in document.documentElement.style) {
  outer.addEventListener('transitionend', function(e) {
if(e.target == content) { return;}
    console.log('before');
    e.stopPropagation();
    console.log('after');
  });
}

这里e.停止传播（）；停止事件以进一步传播，例如，如果您有祖父母div，那么事件将不会到达那里，但在这种情况下，由于事件来自子事件，它将被outer.addEventListener捕获…所以最好的方法是检查事件目标，然后做出决定

---

希望能有帮助

我不明白这个问题；它似乎在这里工作得很好（Chrome49和Firefox45）@freestock.tk它工作正常，但是

transitionend

事件在

content

的动画结束时执行。我希望

transitionend

事件仅在外部div的事件结束时执行，而不是内容。因此我认为您可以在事件上添加一个警报，让家长们知道问题更清楚，因此在采取行动之前确保

e.target

是正确的。@Jessica:是的，就像那样。谢谢，但是我希望父（外部）元素触发

transitionend

事件。不是子元素（内容）@Jessica所以您希望事件触发父元素（外部）

transitionend

事件，并且您希望停止向子元素（内容）的传播？这正是我想要的。@Jessica gotcha:）因此必须使用相同的事件侦听器类型在子元素上设置

e.stopPropagation（）

。。。因此，如果你想阻止说一个

点击

事件从“冒泡”或“传播”到孩子们，你必须添加一个相同类型的监听器，例如，点击或在本例中是

传递

，我将更新解释事情的代码！终于有人明白我的要求了！谢谢javascript让你这么做不是很低效吗？我不知道是谁否决了这个。。。但是它确实是没有效率的，你在所有具有prop

transition

的元素中循环，检查是否为true，然后检查

e.target==content

。。。这只是在吸吮记忆。看看我的例子，它是最有效的。这是正确的方法。这是一种事实上更节省内存的事件委派。顺便说一句，@jordavis您的评论是错误的，因为没有涉及循环，它只是检查对象/原型链中是否存在该属性。那么谁是对的？哪种方法更好？我不支持任何人，但是@dandavis在上面的评论（问题的评论）中说要像Avinash Agrawal那样做

if ('transition' in document.documentElement.style) {
  outer.addEventListener('transitionend', function(e) {
if(e.target == content) { return;}
    console.log('before');
    e.stopPropagation();
    console.log('after');
  });
}