JavaScript - Double Click Event

A simple code example to implement a double click event using JavaScript.

In the HTML, a <div> tag is specified with the ID 'target' as the object for double-clicking.

<div id="target">Let's<br>Double Click</div>

In CSS, the size and properties for double-click events are set.

#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;
}

The specified element is chosen using querySelector(), and 'addEventListener()' with 'dblclick' is implemented to capture the double-click event.
Upon detecting the double-click event, the code references the target element's 'border-radius' property to modify its shape.

// Target element
let target = document.querySelector('#target');

// Double click event
target.addEventListener('dblclick', () => {
	// Modify the shape of the target
	if (window.getComputedStyle(target).borderRadius !== '0%') {
		target.style.borderRadius = '0%';
	} else {
		target.style.borderRadius = '50%';
	}
});