Podwójne wywołanie eventlistenera po jednym kliknięciu z powodu label

Question

Mam problem jak w temacie. Mam checkboxa z labelem zrobionego tak, żeby kliknięcie w label również zaznaczało checkboxa. Problem w tym, że podpięty jest do tego eventlistener i to wywołuje działanie dwa razy (w moim wypadku pokazuje się druga dodatkowa, zdublowana, pusta tabela). Długo szukałem w kodzie co wywołuje buga, aż w końcu dotarłem do sedna i wyczytałem w czym problem. Znalazłem nawet kilka rozwiązań jak to:

https://stackoverflow.com/questions/52869548/javascript-event-listener-fires-twice-when-clicking-on-text-inside-label-element

Ale nie bardzo się to nadaje, bo klikanie labela i checkboxa nie wywołuje tu eventlistenera. Dopiero kliku na puste pole w tym divie, a po co to komu? Próbowałem stworzyć rozwiązanie na bazie tego, ale nie poszło.

Po dłuższym kombinowaniu poleciałem po najmniejszej linii oporu i zrobiłem bieda rozwiązanie. Działa jak trzeba (aby po kliknięciu checkboxa odpalał się eventlistener, a jeśli kliknie się w labela to zaznaczał się checkbox i odpalał się eventlistener), ale to dublowanie działanie:

for($i=1; $i<=$_SESSION['numberOfRow']; $i++) {
	echo '
	<li class="inline testLI" title="'.$_SESSION["dataTable"][$i][7].'" id="ownList'.$i.'">
		// <label class="labelcheckBoxBtnOwn" for="own'.$i.'">
			<input type="checkbox" name="ownCheckBox" value="'.$i.'" id="own'.$i.'" class="checkBoxBtn checkBoxBtnOwn checkBoxBtnOandF">
			<span>'.
				// wyświetlane dane						
			'</span>
		// </label>
	</li>';
}

var userSelection = document.getElementsByClassName('testLI'); // wcześniej dla labela -> labelcheckBoxBtnOwn
var checkBoxSelectedOwn = document.getElementsByClassName('checkBoxBtnOwn');


for(var i = 0; i < userSelection.length; i++) {
	(function(index) {			
		userSelection[index].addEventListener("click", function(e) {
		
			if(checkBoxSelectedOwn[index].checked == false)
				checkBoxSelectedOwn[index].checked = true;
			else
				checkBoxSelectedOwn[index].checked = false;

// dalszy kod po kliknięciu

		})
	})(i);
}
	

Wprowadziłem po prostu zwykłego ifa, który zaznacza lub odznacza checkboxa, gdy użytkownik kliknie gdzieś w ciało pozycji na liście, ale to oznacza, że kliknięcie na samym checkboxie będzie quasi podwójne - zaznaczony go i od razu odznaczy, więc jeszcze dodatkowo ten sam mechanizm tylko na checkboxie:

for(var i = 0; i < userSelection.length; i++) {
	(function(index) {
		checkBoxSelectedOwn[index].addEventListener("click", function() {
			console.log("Stop");
			if(checkBoxSelectedOwn[index].checked == false)
				checkBoxSelectedOwn[index].checked = true;
			else
				checkBoxSelectedOwn[index].checked = false;
		});
	})(i);
}

No i tak jak mówiłem, działa jak trzeba, zaznacza jak trzeba. Tabelkę generuje ładnie pojedynczo, tylko nie sądzę, żeby było to eleganckie rozwiązanie.
 

Answer 1

Nie lepiej byłoby się po prostu podpiąć pod zdarzenie change checkboxa? Wówczas nie powinno się to odpalać dwukrotnie.

Comments

Z klikiem jest związane więcej rzeczy, które pod change nie podpadają, więc trzeba by było rozbijać kod. Ale tak czy inaczej zmiana na change byłaby też obejściem problemu, zamiast próby jego rozwiązania.

---

No nie byłaby. Jeśli coś się ma odpalić przy kliku na checkboxa, to jest to de facto równoznaczne z odpaleniem tego przy zmianie stanu checkboxa. Bo każdy klik na checkboxie będzie go naprzemiennie odznaczał i zaznaczał. Ergo: nie widzę żadnej różnicy między użyciem kliku a change w tym wypadku.

Nie do końca też rozumiem to:

Z klikiem jest związane więcej rzeczy, które pod change nie podpadają, więc trzeba by było rozbijać kod.

Jeśli uznamy, że klik = change w przypadku checkboxa, to nie bardzo widzę sens takiego rozróżnienia. 

---

No niezupełnie. Checkboxy są schowane w rozwijanych menu. Rozwijanych menu jest kilka. Tylko dwa z nich mają checkboxy (czyli multiwybór, a więc nie może się zamykać po kliknięciu checkboxa), pod resztą wybiera się pojedyncze rzeczy, więc odwrotnie - po kliknięciu wyboru menu samo się zamyka. Ustawienie change zamiast clicka kłóci z klikaniem gdziekolwiek poza pozycją na liście checkboxów i w konsekwencji od razu zamyka menu bez nawet zaznaczenia.

Oczywiście, rozwiązanie nie jest jakieś trudne, ale wiąże się z rozbijaniem i dublowaniem kodu dotyczącego otwierania i zamykania menu. Kodu, który wcześniej złożyłem do kupy, aby działał w różnych przypadkach. Nie chcę mnożyć bytów niepotrzebnie, żeby obejść, a nie rozwiązać pierwotny problem.