JavaScript - ダブルクリックイベント

JavaScriptでダブルクリックのイベントを実装する簡単なコード例です。

HTMLには、ダブルクリックする対象として<div>タグにid名「target」を指定しています。

<div id="target">Let's<br>ダブルクリック</div>

CSSでは、ダブルクリックの対象とするためのサイズを設定しています。

#target {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: 1s;
	background: #b22222;
}

対象とする要素はquerySelector()で指定、addEventListener()で「dblclick」を指定してダブルクリックイベントを実装しています。

ダブルクリックイベントの検出時に対象の「border-radius」を参照して形状を変更しています。

// ターゲットの要素
let target = document.querySelector('#target');

// ダブルクリックイベント
target.addEventListener('dblclick', () => {
	// ターゲットの形状を変更
	if (window.getComputedStyle(target).borderRadius !== '0%') {
		target.style.borderRadius = '0%';
	} else {
		target.style.borderRadius = '50%';
	}
});