once:true 和 addEventListener 在 IE11 或 Edge 上不起作用

Question

我试图只触发一次事件侦听器回调。addEventListener方便地有一个我可以传递给它的标志：

once：一个布尔值，表示添加后最多应调用一次侦听器。如果为 true，则在调用侦听器时将自动删除侦听器。

这在除IE11 和 Edge之外的所有浏览器中都非常有效。我知道我可以在它触发后手动删除事件侦听器，但是这个标志应该可以工作......我做错了什么，或者这是 IE 的公认问题还是什么？

您是否更喜欢 JSFiddle，否则：

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>

Answer 1

检查文档的浏览器兼容性部分：不支持 IE/edge。caniuse也很有帮助。