Události JavaScriptu:Zachraňte bubliny!

Čím více pracujeme s pokročilými, přístupnými a prohledávanými webovými aplikacemi, tím větší kontrolu nad událostmi prvků potřebujeme. Události Mouseenter/leave, události stisku kláves a klasická událost kliknutí jsou pravděpodobně nejposlouchanější události. Bohužel mnoho lidí, včetně mě, nesprávně řešilo zastavení události. Stručně řečeno: Většina uživatelů frameworku JavaScript zabíjí bubliny, aniž by o tom věděli.

Akce „zastavení“ události zahrnují dvě hlavní metody:  Event.preventDefault a Event.stopPropagation . V tom, čeho tyto dvě metody dosahují, je obrovský rozdíl, který uvidíte níže. Dozvíte se také, že slepé používání metod „zastavení“ rámce JavaScriptu může vést k velkým problémům ve vaší webové aplikaci!

Event.preventDefault

Metoda preventDefault zabraňuje události provést svou výchozí funkci. Například byste použili preventDefault na prvku A, abyste přestali kliknutím na tento prvek opouštět aktuální stránku:

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
	e.preventDefault(); 
	console.log('brick me!'); 
};

//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
	console.log('you bricked my child!'); 
};

I když je výchozí funkce prvku zablokovaná, událost se nadále rozšiřuje na DOM.

Event.stopPropagation

Druhá metoda, stopPropagation , umožňuje spuštění výchozí funkce události, ale zabraňuje šíření události:

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
	e.stopPropagation();
	console.log('prop stop! no bubbles!'); 
};

//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
	console.log('you will never see this message!'); 
};

stopPropagation účinně zabrání nadřazeným prvkům, aby věděly o dané události na svém podřízeném prvku.

Dojo's dojo.stopEvent &MooTools' Event.stop

Zde se můžete dostat do problémů: používáte vlastní „stop“ rámce. Každý rámec má jeden, ale všechny v podstatě dělají to samé:

//in mootools....
Event.stop = function(){
	//does both!
	return this.stopPropagation().preventDefault();
}

//mootools usage
myElement.addEvent('click',function(e){
	//stop the event - no propagation, no default functionality
	e.stop();
});

//in Dojo
dojo.stopEvent = function(/*Event*/ evt){
	// summary:
	//		prevents propagation and clobbers the default action of the
	//		passed event
	// evt: Event
	//		The event object. If omitted, window.event is used on IE.
	evt.preventDefault();
	evt.stopPropagation();
	// NOTE: below, this method is overridden for IE
}

//dojo usage
dojo.connect(myElement,'onclick',function(e){
	//stop the event - no propagation, no default functionality
	dojo.stopEvent(e);
});

Metoda provede obě preventDefault a stopPropagation kde je pravděpodobné, že se staráte pouze o zamezení výchozí funkce. Nedávno jsem narazil na tento problém s pluginem Dojo. Po prozkoumání zdrojového kódu jsem si rychle uvědomil, že oba preventDefault a stopPropagation byli voláni a vše, co bylo potřeba, bylo preventDefault . Když jsem aktualizoval zdroj, aby jednoduše použil preventDefault , každý další kus fungoval tak, jak měl!

Save The Bubbles!

I když nám jednoduchá metoda zastavení umožňuje rychle zpracovat události, je důležité myslet na to, co přesně chcete, aby se bublinkování stalo. Vsadil bych se, že vše, co vývojář opravdu chce, je preventDefault 90% času! Nesprávné "zastavení" události vám může způsobit řadu problémů; vaše pluginy nemusí fungovat a vaše pluginy třetích stran mohou být blokovány. Nebo ještě hůř – váš kód narušuje jiné funkce na webu. Zachraňte bubliny!