【javascript】要素を重ね合わせる（overlap elements）

【HTML】

<div class="Cursor"><div></div></div>

【CSS】

.Cursor {
	position: absolute;
	padding: 0;
	margin: 0;
}
.Cursor div {
	position: absolute;
	border: 1px dotted blue;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

【Javascript】

(function () {
	var select = new Event('SelectElement', {bubbles: true});
	(function (click) {
		document.addEventListener('click', click, false);
	})(function (event) {
		var target = event.target;
		var rect = target.getBoundingClientRect();
		var cursor = document.querySelector('.Cursor');

		if (target.closest('.Cursor')) {
			return;
		}

		cursor.style.left = rect.left + 'px';
		cursor.style.top = rect.top + 'px';
		cursor.style.width = rect.width + 'px';
		cursor.style.height = rect.height + 'px';
		cursor.classList.remove('Hide');
		
		target.dispatchEvent(select);
	});
})();

【使い方】

(function (select) {
	document.addEventListener('SelectElement', select, false);
})(function (event) {
	var target = event.target;
	
	console.log(target);
});