JS distinguish mouse Single-click Block event bubbling

functionClickordblclick (obj) {count++; if(obj! =undefined) {        varRowstr = $.trim ($ (obj). Find ("Td:eq (1)"). Text (). Replace (/※/g, ")); CURRENTROWPM=Rowstr; } Timer= Window.settimeout (function(obj) {varCurrenttr = $ ("#tbMainDeputy" + clientpage + "tbody"). Children (). EQ (currentRowpm-1); if(Count = = 1) {rowgetpics (currenttr); } Else{Seteditmode (curenttr,false)} window.cleartimeout (timer) Count= 0    }, 300);}

1. Event Objectives

The event object is now stored in the event handler for the variable event. The Event.target property holds the target element where the event occurred. This attribute is specified in the DOM API, but is not implemented by all browsers. jquery makes the necessary extensions to this event object so that this property can be used in any browser. With. Target, you can determine the element in the DOM that first received the event (that is, the element that was actually clicked). Furthermore, we know that this refers to the DOM element that handles the event, so you can write the following code:
$ (document). Ready (function () {
$ (' #switcher '). Click (Function (event) {
$ (' #switcher. Button '). Toggleclass (' hidden ');
})
})

$ (document). Ready (function () {
$ (' #switcher '). Click (Function (event) {
if (event.target==this) {
$ (' #switcher. Button '). Toggleclass (' hidden ');
}
})
})
The code at this point ensures that the clicked element is <div id= "switcher" >, not another descendant element. Clicking the button now does not collapse the style converter, and clicking the border will trigger the collapse operation. However, clicking a label also doesn't happen because it is also a descendant element. In fact, we can not put the check code here, but by modifying the behavior of the button to achieve the goal.

2. Stop Event Propagation

The event object also provides a. Stoppropagation () method that can completely block event bubbling. Similar to. Target, this method is a pure JavaScript feature, but it is not safe to use in a cross-browser environment. However, we can safely use this method as long as we register all event handlers with jquery.

Below, we will delete the check statement that we just added event.target = = This and add some code to the button's click handler:

$ (document). Ready (function () {
$ (' #switcher. Button '). Click (Funtion (Event) {
......
Event.stoppropagation ();
})
})

As before, you need to add a parameter to the function that is used as the click handler to access the event object. Then, by simply calling Event.stoppropagation (), you can avoid all other DOM elements in response to this event. As a result, clicking on the button's event is handled by the button and will only be handled by the button. Click elsewhere in the style converter to collapse and expand the entire area.

3. Default Action

If we register the click event handler with an anchor element instead of an outer layer of <div>, we face another problem: when the user clicks the link, the browser loads a new page. This behavior is not the same concept as the event handler we are discussing, it is the default action for clicking the anchor element. Similarly, when the user presses the ENTER key after editing the form, it will touch the submit event of the publication, after which the form submission does not actually occur.

If we do not want to perform this default action, calling the. Stoppropagation () method on the event object does not help, because the default action does not occur in the normal event propagation stream. In this case, the. Preventdefault () method can terminate the event before triggering the default action.

Tip When certain validations are completed in the context of an event, the. Preventdefault () is usually used. For example, during form submission, we check whether the user has filled in the required fields, and if the user does not fill in the fields, then the default action needs to be blocked. We will discuss form validation in detail in the 8th chapter.

Event propagation and default operations are two sets of mechanisms that are independent of each other, and can terminate the other when either party occurs. If you want to stop event propagation and the default operation at the same time, you can return false in the event handler, which is a shorthand for calling. Stoppropagation () and. Preventdefault () at the same time on the event object.

Detailed description of event bubbling and event capture in JS

Events-how to use events and what are the main differences between the IE and DOM event models, a friend you need to refer to

(1) Bubbling event: The event is triggered in the order from the most specific event target to the least specific event target (Document object).

IE 5.5:div, Body, document

HTML--Document, body, IE 6.0:div

Mozilla 1.0:div, body, HTML, document, window

(2) Capture event (event capturing): Events are triggered from the most imprecise object (Document object) and then to the most accurate (and can also be captured at the window level, but must be specifically specified by the developer).

(3) DOM event Flow: Supports both event models: capture-type and bubbling-type events, but capture-type events occur first. The two event streams touch all objects in the DOM, starting with the document object and ending at the Document object.

The most unique nature of the DOM event model is that text nodes also trigger events (not in IE).

Browsers that support the Internet standard Use the AddEventListener (event,fn,usecapture) method when adding an event, Kizhong the 3rd parameter usecapture is a Boolean value that is used to set the event to be executed when the event is captured, Or when the event bubbles. and the browser (IE) is not compatible with the Attachevent () method, this method does not have the relevant settings, but the IE event model by default when the event bubbling, that is, when the usecapture equals false execution, So it is safer to set Usecapture to false when handling events, and also to achieve a compatible browser effect.

Event Capture phase: Events are looked up from the top level of the label until the event target is captured.
Event bubbling stage: The event starts with the event target and bubbles up to the top level of the page label.

Suppose an element Div, which has a subordinate element p.
<div>
<p> Elements </p>
</div>
Both of these elements are bound to the Click event, and if the user clicks P, it triggers the Click event on both Div and P, which of the two event handlers executes first? What is the order of events?

Two types of models
Previously, Netscape and Microsoft were different implementations.

In Netscape, the div is triggered first, which is called event capture.

In Microsoft, p is triggered first, which is called event bubbling.

The two kinds of event processing order are reversed. IE only supports event bubbling, Mozilla, Opera 7 and Konqueror two support, older versions of opera ' s and icab two are not supported.

Event capture
When you use event capture, the parent element is triggered first, the child element is triggered, that is, the div is triggered first, and P is triggered.

Event bubbling
When you use event bubbling, the child element is triggered first, the parent element fires, that is, p fires first, and the div fires.

Model
The model is to neutralize the two, and in the model, when any event occurs, the event is captured first from the top level until the event trigger arrives at the event source element. Then, the event bubbles up from the event source until the document is reached.

The programmer can choose whether to use event capture or event bubbling when binding an event by using the AddEventListener function, which has three parameters, and if the third parameter is true, the event is captured, or false, which indicates that event bubbling is used.

Ele.addeventlistener (' click ', dosomething2,true)

True= capture

False= Bubble

Traditional bound Event mode
In a browser that supports the DOM, the usual way to bind events is to use event bubbling.

Ele.onclick = DoSomething2

IE browser
As mentioned above, IE only supports event bubbling, does not support event capture, it does not support the AddEventListener function, does not use a third parameter to indicate whether it is bubbling or capturing, and it provides another function attachevent.

Ele.attachevent ("onclick", doSomething2);

Attached: event bubbling (The process): the event from which the object occurred (event.srcelement| | Event.target) starts by bubbling up the document up and down, to the documents.

The propagation of events can be prevented:
• Use the Stoppropagation () method in the
• Set cancelbubble = True under IE;
Stoppropagation () in the process of capture, the subsequent bubbling process does not occur ~
3. Blocking the default behavior of the event, such as Click <a> Jump ~
• Use the Preventdefault () method in the user's list;
• Set window.event.returnValue = False under IE;
4. Wow, finally finished, while the Test side write the amount, not all events can bubble, for example: Blur, focus, load, unload, (this is from someone else's article, I did not test)

JS distinguish mouse Single-click Block event bubbling