Html File Drag and Drop Upload Stackoverflow

How to correctly utilize preventDefault(), stopPropagation(), or return simulated; on events

I'thousand certain this has been written about many times before and probably has hundreds of answers on StackOverflow. Despite this we still notice ourselves going through lawmaking bases and repeatedly finding the misuse (or interchangeable apply, or combined utilise) of result.preventDefault(), event.stopPropagation() and return false;.

So today we're going to learn what the differences are betwixt the 3, and exactly how they function.

preventDefault(), stopPropagation(), and return false; are non interchangeable, nor are they tools of trial-and-fault.

Nosotros'll start off with a pretty common UI pattern — a file upload panel — and run across how each of them touch on its behaviour.

Paradigm courtesy of FineUploader

HTML

Our HTML consists of iii parts:

1. An input to handle the file upload dialog. This is hidden (display: none;) , as we will be triggering the upload dialog using the following 2 elements.
2. A div with the grade of file-upload__dropzone which acts as the main 'drib zone' where we will be able to elevate-and-drop files (lawmaking not included) or click to open a file upload dialog.
3. An a tag with the class of file-upload__btn--upload which volition deed every bit the "Upload files" button, which when clicked will open a file upload dialog.

JavaScript

Our JavaScript, similar our HTML, as well consists of 3 parts:

1. A fileUpload part to trigger the click effect on the file upload input.
2. Assigning both the dropzone div and a push to variables.
3. Adding result listeners to those, which when clicked invoke the fileUpload function.

If we were to try this out now, nosotros may see some odd behaviour — later on the outset dialog has opened and nosotros have called our file, a second 1 will open prompting us again. Proceed reading and all will be revealed.

upshot.preventDefault()

Prevents the browsers default behaviour (such equally opening a link), but does not stop the event from bubbling up the DOM.

In our scenario, clicking on the "Upload files" push button will invoke the fileUpload function, as we would expect.

Being an a tag, nevertheless, it likewise has a default behaviour — this beingness to navigate the browser to the location in the href attribute. In this instance we have this set to #, which in most browsers will but cause the page to jump back to the summit.

Jumping back to the top of the page is non really our desired behaviour, so we can prevent this past using the preventDefault method. This prevents the default behaviour of an element.

Modifying our JavaScript code, nosotros tin prepare this so that clicking the link prevents the default behaviour of navigating to the location in the href attribute, merely still opens the file upload dialog.

Hither we have taken the click event and prevented its default behaviour using event.preventDefault(), and so invoked the fileUpload() function.

We however accept the dialog box popping up twice, but hopefully the next section will solve this issue.

consequence.stopPropagation()

Prevents the event from bubbles upwards the DOM, just does non end the browsers default behaviour.

For an in-depth explanation of consequence bubbling, I'd recommend this article about event propagation. Just essentially, when an event is called on an element, that event bubbles up the DOM and gets called on all of the elements parents.

In our case, that means that when we click on the "File upload" push, that click event is also called on all of its parent elements, including our dropzone.

To encounter this in activity, we can remove the fileUpload() call in the button event listener and the function volition yet be invoked when nosotros click on the button because the click event will bubble up the DOM and be called on the dropzone.

This bubbles is an example of consequence propagation, which is where the stopPropagation method comes into play. Nosotros tin can use it to preclude this default bubbling behaviour so that the outcome is but registered by the element it is chosen upon.

Now we encounter that non only does the click upshot not bubble upward the DOM, only by removing the preventDefault method telephone call the a tag acts equally it should again, past navigating to its href attribute.

Only this isn't what we want. We wanted to call the fileUpload function and also prevent the element's default behaviour and forestall the event from bubbling upwards the DOM.

We could apply both preventDefault and stopPropagation then telephone call the fileUpload function, like and then.

return false;

Unremarkably seen in jQuery lawmaking, information technology Prevents the browsers default behaviour, Prevents the event from bubbles upwardly the DOM, and immediately Returns from any callback.

In vanilla JavaScript, returning false doesn't have any event on the default behaviour or issue propagation of the element, every bit we can run into here, it acts exactly every bit it did at the starting time.

Information technology calls the click issue on the push button, besides navigating to it's href value, then bubbles up the DOM, calling the click event on the dropzone too.

Nonetheless…

…in the context of jQuery , returning false will immediately exit the effect listeners callback. This has the outcome of both:

1. Preventing the default behaviour — navigating the browser to the a tag's href aspect.
2. Stopping any event propagation — stopping the click effect from bubbling up the DOM.

If nosotros refactor our code to jQuery, we tin run into this in practice.

We call the fileUpload method, so return false to foreclose whatsoever default behaviour or consequence propagation.

Determination

We should use these tools correctly and wisely.

Next time when we're in this kind of situation, nosotros shouldn't but play around with event.preventDefault(), event.stopPropagation() and render fake; until we go the desired result.

We should remember what it is we want to achieve, and how to get there — not through trial-and-error and luck — merely through thinking through the trouble and applying the correct solution.

robinsonwirave1956.blogspot.com

Source: https://medium.com/@jacobwarduk/how-to-correctly-use-preventdefault-stoppropagation-or-return-false-on-events-6c4e3f31aedb