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>

+3

これは、古い犬がすることができない新しいトリックです。 – dandavis

答えて

2

docsのブラウザ互換性チェック部:なしIE/EDGEをサポートし。 caniuseも役に立ちます。

関連する問題