Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the method to prevent Js bubbling events". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "what is the method to prevent Js bubbling events" can help you solve the problem.

one。 Event target

The variable event in the event handler now holds the event object. The event.target attribute holds the target element that generated the event. This property is specified in DOM API, but is not implemented by all browsers. JQuery expands this event object as necessary so that this property can be used in any browser. With .target, you can be sure of the element in the DOM that first received the event (that is, the element that was actually clicked). Also, we know that this invokes a DOM element that handles events, so we 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 time ensures that the element being clicked is not any other descendant element. Now, clicking the button no longer collapses the style converter, while clicking the border triggers the collapse operation. However, clicking the tag produces nothing, because it is also a descendant element. In fact, instead of putting the check code here, we can reach the goal by modifying the action of the button.

two。 Stop the propagation of events

The event object also provides a .stopPropagation () method that completely prevents event bubbling. Similar to .target, this method is a pure JavaScript feature, but it cannot be safely used in a cross-browser environment. However, as long as we register all the event handlers through jQuery, we can use this method with heart.

Next, we will delete the check statement event.target = = this that we just added and add some code to the click handler of the button:

$(document) .ready (function () {

$('# switcher. Button') .click (funtion (event) {

/ /.

Event.stopPropagation ()

})

})

As before, you need to add a parameter to the function used as the click handler to access the event object. Then, by simply calling event.stopPropagation (), you can prevent all other DOM elements from responding to this event. In this way, the event of clicking the button is handled by the button and only by the button. Click elsewhere in the style converter to collapse and expand the entire area.

three。 Acquiesce in operation

If we register the click event handler with an anchor element instead of an outer one, we are faced with another problem: when the user clicks the link, the browser loads a new page. This type of action is not the same concept as the event handler we are talking about; it is a tacit action that clicks an anchor element. Similarly, when the user presses enter after editing the form, the submit event of the form is triggered, and the form submission does not actually occur until this event is generated.

If we do not want to perform such acquiescence operations, then calling the .stopPropagation () method on the event object is a drop in the bucket, because the acquiescence operation does not occur in the normal event propagation flow. In such cases, the .preventDefault () method can terminate the event before triggering the acquiescence action.

Hint: .principentDefault () is usually used after some validation has been completed in the context of the event. For example, during the submission of the form, we will check whether the user has filled in the required fields, and if the user does not fill in the corresponding fields, then acquiescence needs to be prohibited. We will discuss form validation in detail in Chapter 8.

Event propagation and acquiescence are two sets of independent mechanisms, which can terminate the other party when either of them occurs. If you want to stop both event propagation and acquiescence, you can return false in the event handler, which is a shorthand for calling .stopPropagation () and .principentDefault () on the event object at the same time.

This is the end of the content about "what is the method to prevent Js bubbling events". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.