• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+1 głos
138 wizyt
pytanie zadane 8 maja 2016 w JavaScript przez ScriptyChris Mędrzec (190,190 p.)

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);

 

1 odpowiedź

+3 głosów
odpowiedź 9 maja 2016 przez Comandeer Guru (603,480 p.)
wybrane 11 maja 2016 przez ScriptyChris
 
Najlepsza

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.

Podobne pytania

0 głosów
1 odpowiedź 182 wizyt
pytanie zadane 13 czerwca 2016 w HTML i CSS przez Alterwar Dyskutant (7,650 p.)
0 głosów
1 odpowiedź 227 wizyt
pytanie zadane 7 października 2019 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)
+1 głos
3 odpowiedzi 2,285 wizyt
pytanie zadane 13 września 2015 w HTML i CSS przez molaki Obywatel (1,700 p.)

92,768 zapytań

141,694 odpowiedzi

320,510 komentarzy

62,106 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...