select dblclick op option EN optgroup

Door Jan R op 03-07-2022 01:07

1.979 views

Hi

Ik heb een select met meerdere optgroup waaronder ook meerdere options.

Ik wil een dblclick op de optgroup om de items te verbergen/tonen (een soort dicht en open klappen) en een dblclick om gekozen item toe te voegen aan een andere select.

Beide opties werken echter als ik dblclick op een optie wordt ook de groep uitgevoerd.

Hoe kan ik dat vermijden?

Eventueel kan ik de event hangen aan de select maar hoe weet ik dan of de click aan de groep of op de optie is?

Jan

PS pure javascript. Geen jquery.

Ivo P

03-07-2022 02:26

wat heb je al aan code?

Jan R

03-07-2022 07:51

option: ondblclick="add2list(this);"
optgroup: ondblclick="collapseGroup(this);"

Jan Koehoorn

05-07-2022 19:46 gewijzigd op 05-07-2022 19:48

Je hebt te maken met event bubbling. Dat betekent dat een event dat op een child element plaatsvindt, omhoog "bubbelt" naar zijn parent(s).

Om dat te voorkomen is er de methode stopPropagation() van het JavaScript Event object:
[code]
var options = document.querySelectorAll("option");
for (var option in options) {
option.addEventListener('dblclick', function(e){
e.stopPropagation();
// Hier de rest van je add2list code
});
}

Jan R

06-07-2022 02:46

Bedankt. het werkt zoals het moet :)

Reageren

Inloggen om te reageren