More than 5 years have passed since last update.

disabled属性のbuttonで発火しなくなるイベントのブラウザによる違い

Last updated at 2018-12-12Posted at 2018-12-12

disabled属性のbuttonはclickイベントなどが発火しなくなりますが、どのイベントが発生しなくなるのかはブラウザごとに異なります。

ブラウザ	発生しなくなるイベント
Chrome	click, focus/blur
Firefox	click, focus/blur, mouseup/down
Safari	click, focus/blur, mouseup/down, mouseenter/move/leave
IE11,Edge	無し*
iOS Safari	click, focus/blur
Android Chrome	click, focus/blur

*IE11,EdgeはaddEventListenerによるものでは発火しなくなるイベントはありませんが、onclick属性は実行されなくなりますし、formのbuttonでのsubmitは発火しなくなります。

以下のコード書けばIE11,EdgeでもaddEventListenerのclickの実行を回避できます。

window.addEventListener('click', function (e) {
	if(e.target.disabled) {
		e.preventDefault();
		e.stopPropagation();
	}
}, true);