12
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTMLAdvent Calendar 2018

Day 13

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

Last updated at Posted 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);

検証デモ

12
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?