Vraag event.preventDefault () versus return false


Als ik wil voorkomen dat andere eventhandlers worden uitgevoerd nadat een bepaalde gebeurtenis is geactiveerd, kan ik een van de volgende twee technieken gebruiken. Ik gebruik jQuery in de voorbeelden, maar dit geldt ook voor plain-JS:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

Is er een significant verschil tussen deze twee methoden om de propagatie van gebeurtenissen tegen te houden?

Voor mij, return false; is eenvoudiger, korter en waarschijnlijk minder foutgevoelig dan het uitvoeren van een methode. Met de methode moet je onthouden over juiste behuizing, haakjes, enz.

Ook moet ik de eerste parameter in callback definiëren om de methode te kunnen aanroepen. Misschien zijn er enkele redenen waarom ik zou moeten vermijden om het op deze manier te doen en te gebruiken preventDefault in plaats daarvan? Wat is de betere manier?


2646
2017-08-31 11:58


oorsprong


antwoorden:


return false van in een jQuery-gebeurtenisafhandelingsroutine is in feite hetzelfde als beide oproepen e.preventDefault en e.stopPropagation op de doorgegeven jQuery.Event-object.

e.preventDefault() voorkomt dat de standaardgebeurtenis optreedt, e.stopPropagation() zal voorkomen dat de gebeurtenis opborrelt en return false zal beide doen. Merk op dat dit gedrag verschilt van normaal (niet-jQuery) event handlers, waarbij, met name, return false doet niet stop het evenement om op te borrelen.

Bron: John Resig

Elk voordeel van het gebruik van event.preventDefault () over "return false" om een ​​href-klik te annuleren?


2596
2017-08-31 12:05



Uit mijn ervaring is er ten minste één duidelijk voordeel bij het gebruik van event.preventDefault () over het gebruik van return false. Stel dat u de klikgebeurtenis op een ankertag vastlegt, anders zou het een groot probleem zijn als de gebruiker zou worden genavigeerd weg van de huidige pagina. Als uw clickhandler return false gebruikt om browser-navigatie te voorkomen, wordt de mogelijkheid geopend dat de interpreter de return-instructie niet bereikt en dat de browser doorgaat met het uitvoeren van het standaardgedrag van de anchor-tag.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

Het voordeel van het gebruik van event.preventDefault () is dat u dit als de eerste regel in de handler kunt toevoegen, waardoor wordt gegarandeerd dat het standaardgedrag van het anker niet wordt geactiveerd, ongeacht of de laatste regel van de functie niet wordt bereikt (bijvoorbeeld runtime-fout ).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

392
2018-01-22 22:37



Dit is niet, zoals je het hebt genoemd, een "JavaScript" -vraag; het is een vraag met betrekking tot het ontwerp van jQuery.

jQuery en de eerder gekoppeld citaat van John Resig (in karim79's  bericht) lijken het bron-misverstand te zijn over hoe event-handlers in het algemeen werken.

Feit: een gebeurtenishandler die false retourneert, voorkomt de standaardactie voor die gebeurtenis. Het stopt de gebeurtenisuitbreiding niet. Event handlers hebben altijd zo gewerkt, sinds de oude dagen van Netscape Navigator.

De documentatie van MDN legt uit hoe return false in een gebeurtenishandler werkt

Wat er in jQuery gebeurt, is niet hetzelfde als wat er gebeurt met gebeurtenishandlers. DOM-evenementlisteners en MSIE "bijgevoegde" evenementen zijn een geheel andere zaak.

Zie voor meer informatie attachEvent op MSDN en de W3C DOM 2 Evenementen documentatie.


89
2018-06-20 21:31



Over het algemeen is uw eerste optie (preventDefault()) is degene die je moet nemen, maar je moet weten in welke context je zit en wat je doelen zijn.

Voorzie uw codering van brandstof heeft een geweldig artikel op return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation().

NOTITIE: De Voorzie uw codering van brandstof link hierboven produceert al geruime tijd 5xx-fouten. Ik heb er een kopie van gevonden in de Internetarchief, drukte het af naar PDF en stopte het in Dropbox: gearchiveerd artikel op return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



Bij gebruik van jQuery, return false doet 3 afzonderlijke dingen als je het noemt:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. Stopt de uitvoering van terugbellen en keert onmiddellijk terug als deze wordt aangeroepen.

Zien jQuery-gebeurtenissen: stop (verkeerd) met Return False voor meer informatie en voorbeelden.


51
2018-02-19 15:54



Je kunt veel functies ophangen op de onClick evenement voor één element. Hoe weet je zeker dat het false zal iemand de laatste zijn om te vuren? preventDefault aan de andere kant zal zeker alleen het standaardgedrag van het element worden voorkomen.


37
2017-08-31 12:02



I denk

event.preventDefault()

is de w3c gespecificeerde manier om gebeurtenissen te annuleren.

Je kunt dit lezen in de W3C-specificaties op Annulering van evenementen.

Ook kun je return false niet gebruiken in elke situatie. Bij het geven van een javascript-functie in het href-kenmerk en als u false retourneert, wordt de gebruiker omgeleid naar een pagina met een verkeerd geschreven string.


17
2017-08-31 12:04