e.stopPropagation不工作 [英] e.stopPropagation not working

问题描述

我向元素添加了一个 transtionend 回调事件。这个元素有一个孩子也有一个转换。

问题是，当孩子的转换结束时，它的父 transitionend 事件被调用。

我尝试将 e.stopPropagation（）添加到 transitionend 事件，但没有帮助。似乎没有做任何事情。当孩子完成转换时，如何防止 transitionend 事件发生？

JSFiddle

  var outer = document.getElementById（'outer'），content = document.getElementById（'content'），outerButton = document.getElementById（'outerButton'），contentButton = document.getElementById（'contentButton'）; outerButton.addEventListener（'点击'，function（）{outer.style.width =（outer.style.width ==='300px'）？'500px'：'300px';}）; contentButton.addEventListener（'click'，function（） content.style.width =（content.style.width ==='150px'）？'250px'：'150px';}）; if（'documentElement.style中的'transition'）{outer.addEventListener（' '，function（e）{a lert（'transitionend'）; console.log（'before'）; e.stopPropagation（）;的console.log（后）; }）;}  

  #outer {width：500px;背景颜色：橙色; transition：width 0.7s ease-in-out;}＃content {background-image：url（http://i.imgur.com/nri7bYd.jpg）; height：200px;宽度：250px;转换：width 0.7s ease-in-out;}  

  < div id =outer> < div id =content>这是一些内容< / div>< / div>< button id =outerButton>改变外部宽度（橙色）元素< / button>< br /> ;< br />< button id =contentButton>更改内容宽度（image）元素< / button>  

解决方案

从问题和意见中我了解的是，您不希望在子元素上发生转移事件。

从上面的代码中，由于您已将过渡结束事件应用于您的父级（在本例中为外部），因此也将捕获所有子事件。 p>

处理此问题的最佳方法是在方法中添加支票。

  if（'.documentElement.style中的'transition'）{
 outer.addEventListener（'transitionend'，function（e）{
 if（e.target == content）{return; } 
 console.log（'before'）; 
 e.stopPropagation（）; 
 conso le.log（'after'）; 
}）; 
} 
  

这里e.stopPropagation（）;停止事件进一步传播，例如，如果你有grandParent div，那么事件不会去那里，但在这种情况下，由于事件来自孩子，它被cat.addEventListener捕获...所以最好的方法是检查事件目标，然后作出决定。

希望有帮助!!

I added a transtionend callback event to an element. This element has a child that has a transition as well.

The problem is that, when the child's transition ends, its' parent transitionend event gets called.

I tried adding e.stopPropagation() to the transitionend event, but it didn't help. It didn't seem like it did anything. How can I prevent the transitionend event happening when the child finishes its transition?

JSFiddle

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('click', function() {
  content.style.width = (content.style.width === '150px') ? '250px' : '150px';
});

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

#outer {
  width: 500px;
  background-color: orange;
  transition: width 0.7s ease-in-out;
}
#content {
  background-image: url("http://i.imgur.com/nri7bYd.jpg");
  height: 200px;
  width: 250px;
  transition: width 0.7s ease-in-out;
}

<div id="outer">
  <div id="content">This is some content</div>
</div>

<button id="outerButton">Change Width of Outer (orange) Element</button>
<br />
<br />
<button id="contentButton">Change Width of Content (image) Element</button>

解决方案

What I have understood from the question and comments is that you don't want transitionend event to happen on child element.

From the code above , since you have applied transition end event to your parent (in this case outer), hence this will capture all the child event as well.

Best way to deal with this problem is to add a check, in the method.

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

Here e.stopPropagation(); stops the event to further propagate, for example if you had grandParent div , then the event will not go there, but in this case since the event is coming from child, it is catched by outer.addEventListener...So best way is to check the event target and then take a decision.

Hope it helps!!

这篇关于e.stopPropagation不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！