Wykluczenie pseudoklas ::before i ::after z EventListenera 'mousemove'

Question

Napisałem prostą aplikacje, która umożliwia dynamiczne pokazywanie aktualnej barwy koloru na podstawie palety HSL.

Wszystko działa, ale zauważyłem, że EventListener nasłuchujący poruszanie myszki na DIVie łapie również jego pseudoklasy ::before i ::after. Przez to, gdy myszką najadę na opisy osi X (Hue) i Y (Saturation), to wartości te zmieniają się (po prawej stronie DIVa), ale nieprawidłowo, ponieważ wychodzą poza zakres HSL.

W jaki sposób można wykluczyć pseudoklasy ::before: i ::after z EventListener'a? Tzn. co w IF wstawić, jakie atrybuty sprawdzać?

Cały kod: https://jsfiddle.net/Chriss92/q2mjp5xw/

Problematyczny element HTML:

<div id="colorPalette" class="colors color-input"></div>

::before i ::after w CSS:

.color-input::before
{
	content: "Saturation \2191";
	font-weight: bold;
	font-size: 20px;
	position: absolute;
	left: 190px;
}

.color-input::after
{
	content: "Hue \2192";	
	font-weight: bold;
	font-size: 20px;
	position: absolute;
	left: 600px;
	top: 200px;	
}

EventListener w JavaScript:

// when mouse moves
doc.getElementById('colorPalette').addEventListener('mousemove', function (ev)
{
			// clientX = current view of page in browser
	var h = (ev.clientX - ev.target.offsetLeft).toString(),
		s = (ev.clientY - ev.target.offsetTop).toString() + '%';
	
	/*l = tbv.innerHTML + '%';*/
	
	hsl = h + ',' + s + ',' + l;
					
	// set current color for output 
	colors.style.backgroundColor = 'hsl(' + hsl + ')';
	// set current Hue and Saturation value to HTML elements
	hue.innerHTML = h;
	saturation.innerHTML = s;
	
	console.log('EV TARGET: ', ev.target);
}, false);

 

Answer 1

Hmm… nie wiem, czy jest możliwość wykluczenia tego na poziomie JS, ale jest na poziomie CSS. Dla ::before, ::after dodaj pointer-events: none – wówczas nie powinny reagować na zdarzenia myszy.