javascript - once:true with addEventListener doesn't work on IE11 or Edge - Stack Overflow

admin管理员组

文章数量:1401849

I'm trying to fire an event listener callback just once. addEventListener conveniently has a flag that I can pass into it:

once: A Boolean indicating that the listener should be invoked at most once after being added. If it is true, the listener would be removed automatically when it is invoked.

This works fantastic in every browser except IE11 and Edge. I know that I can manually remove the event listener after it fires, but this flag should work... Am I doing something wrong, or is this an acknowledged issue with IE or what?

Should you prefer JSFiddle, otherwise:

var div = document.getElementById('transition');
var result = document.getElementById('result');

window.grow = function(){
  var width = div.offsetWidth + 50;
  div.style.width = width + 'px';
}

var count = 0;
div.addEventListener('transitionend', function(){
  result.innerHTML = "transitionend has fired " + ++count + " times";
}, { once: true });

#transition{
  background-color: yellow;
  transition: width 2s;
  width: 100px;
}

<div id="transition">
  Content
</div>
<button onclick="grow()">
  Grow the div
</button>
<div id="result">

</div>

I'm trying to fire an event listener callback just once. addEventListener conveniently has a flag that I can pass into it:

once: A Boolean indicating that the listener should be invoked at most once after being added. If it is true, the listener would be removed automatically when it is invoked.

This works fantastic in every browser except IE11 and Edge. I know that I can manually remove the event listener after it fires, but this flag should work... Am I doing something wrong, or is this an acknowledged issue with IE or what?

Should you prefer JSFiddle, otherwise:

var div = document.getElementById('transition');
var result = document.getElementById('result');

window.grow = function(){
  var width = div.offsetWidth + 50;
  div.style.width = width + 'px';
}

var count = 0;
div.addEventListener('transitionend', function(){
  result.innerHTML = "transitionend has fired " + ++count + " times";
}, { once: true });

#transition{
  background-color: yellow;
  transition: width 2s;
  width: 100px;
}

<div id="transition">
  Content
</div>
<button onclick="grow()">
  Grow the div
</button>
<div id="result">

</div>

• javascript
• internet-explorer
• dom-events
• microsoft-edge
• addeventlistener

Share Improve this question Follow edited Jul 14, 2021 at 17:38 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 30, 2016 at 21:38 adamdportadamdport 12.7k1414 gold badges7373 silver badges9292 bronze badges 1

• 4 it's a new trick, which old dogs can't do. – dandavis Commented Dec 30, 2016 at 21:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Check the browser patibility section of the docs: no IE/edge support. caniuse is also helpful.

本文标签： javascriptoncetrue with addEventListener doesn39t work on IE11 or EdgeStack Overflow