2
イベントリスナーのコールバックを1回だけ起動しようとしています。 addEventListener
には便利なフラグがあります。once:addEventListenerでtrueがIE11またはEdgeで機能しない
once:リスナーを追加した後に最大で1回呼び出す必要があることを示すブール値です。 trueの場合、リスナーは呼び出されると自動的に削除されます。
これはすべてのブラウザで素晴らしいです。 IE11とEdgeを除く。私は、イベントリスナーを起動後に手動で削除できることを知っていますが、このフラグは機能するはずです...私は何か間違っているのですか、これはIEの問題とは何ですか?
Should you prefer 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>
これは、古い犬がすることができない新しいトリックです。 – dandavis