without handleEvent

by Sasabee

HTML

<body>
	<div class="box"></div>
</body>

CSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	max-height: 466px;
}
.box {
	width: 200px;
	height: 200px;
	background-color: orangered;
}

JavaScript

const el = document.querySelector('.box');

const clickCallback = ()=>{
	mouseLeaveCallback.startTime = performance.now();
	el.addEventListener('mouseleave', mouseLeaveCallback);
};

const mouseLeaveCallback = ()=>{
	const endTime = performance.now();
	el.removeEventListener('mouseleave', mouseLeaveCallback);
	alert(`${endTime - mouseLeaveCallback.startTime} ms`);
};

el.addEventListener('click', clickCallback);