About JS in return false, Event.preventdefault () and Event.stoppropagation ()

In the usual project, if you encounter the need to block browser default behavior, we often use return false, and event.preventdefault () to prevent, but the difference between the two or some smattering, so read the document, check out some information, in this summary of the difference between the two, By the way take the event.stoppropagation () together to differentiate.

First, native JS:

About return false and Preventdefault:

Mentioned in the version of the Document Object Model Events Specification1.3:

EventListener Eventtarget after they has completed using the listener.

Handleeventthis method is called whenever a event occurs of the type for which the EventListener interface was registered .

At the same time, in 1.2.4. The Event cancelation document also mentions:

During any phase of event flow the default action would be canceled.

HTML5 section 6.1.5.1 of the HTML spec specification is defined as follows:

Otherwiseif return value is a webidl boolean false value, then cancel the event.

In other words, the return value of the event handler is only meaningful for handlers registered through the property, and if we do not bind the event through the AddEventListener () function, to suppress the default event, use return false; However, if you want to bind with AddEventListener () or attachevent (), use the Preventdefault () method or set the ReturnValue property of the event object.

In the H5 specification, why should otherwise to emphasize return false, because the specification has indicated in the mouseover and so on several special event circumstances, return false, does not necessarily can terminate the event. Therefore, in actual use, we need to avoid the default behavior of the event by return false;

Second, in jquery:

Here you need to understand the following event passing mechanism:

For example, the MouseDown event is triggered when the mouse is pressed.
The event starts with the Document->ancestor element->...->parent->event.target (the mouse pressed on this element)->parent->...-> Ancestor Element->document.
Events go through a loop, from Documet to Event.target and back to document, the process from Event.target to document is called bubbling.

Event.stoppropagation (); The event stops bubbling until the event is passed up to document, but the default behavior of this event is still executed, such as clicking on a link, calling Event.stoppropagation (), and the link will still be opened.

Event.preventdefault (); Cancels the default behavior of the event, such as clicking on a link that will not be opened, but this event will still be passed to the previous ancestor element.

Use return False in the event handler function; Equivalent to calling both Event.stoppropagation () and Event.preventdefault (), the default behavior of the event is not executed and the event does not bubble up.

At this point in jquery, return false; it is not a matter of simple coverage and specification. Calling return False in the jquery event handler is equivalent to calling both the Preventdefault and Stoppropagation methods, which causes the current element's events to not bubble up, causing problems in event broker mode.

For example, I have a div container, which is a few a tags, their href store the URL address, the URL is used to dynamically load into the following div#content, here for a simple demonstration, only the URL string is written to div#content:

<DivID= "Container">   <ahref= "/content1.html">Content1</a>   <ahref= "/content2.html">Content2</a>     <DivID= "Content">I will change depending on the URL of the click link</Div></Div>

 //  All the A-label bindings under container Click event handler  $ (" #container "). Click ( function   (e) { if  ( E.target.nodename = = "A" ) {$ ( #content  //  and then binds the click event handler to a tag to block the default event  $ ("#container a"). Click ( function   () { return   False    

After the above code is run, although the click Default behavior of the a tag is blocked, but the bubbling event is stopped at the same time, causing its outer parent element to not detect the Click event, so jquery needs to understand return false; Event.preventdefault () The difference between the two.

That is, try not to use return False to prevent the default behavior of the event.

Report:

Event.preventdefault () method is not supported by IE, under IE need to use Window.event.returnValue = false; To achieve. This is generally the case, the code is as follows:

function Stopdefault (e) {
if (e && e.preventdefault) {
E.preventdefault (); //browser that supports DOM standards

} else {
Window.event.returnValue = false; Ie

}
}

can also handle IE | | The problem of dragging Firefox slices.

document.onmousemove=function(EV) {  var oevent=ev| |　　event;　　 if(oevent.preventdefault) {Oevent.preventdefault ();}  Else{oevent.returnvalue=false;}}

About JS in return false, Event.preventdefault () and Event.stoppropagation ()