Я пытаюсь запустить обратный вызов прослушивателя событий только один раз. addEventListener
имеет удобный флаг, который я могу передать в Это:
Once: логическое значение, указывающее, что прослушиватель должен быть вызван не более одного раза после добавления. Если это правда, прослушиватель будет автоматически удален при его вызове.
Это прекрасно работает во всех браузерах, кроме 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>