Js bubbling event prevention code_javascript skills

1. Event target

Now, the variable event in the event handler holds the event object. The event.target attribute stores 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 (i.e. the element that was actually clicked). Moreover, we know that this refers to the DOM element that handles the event, so we can write the following code:

Copy code The code is as follows:

$(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 clicked element is

and not other descendant elements. Clicking the button now no longer collapses the style converter, while clicking the border triggers the collapse action. However, clicking on the label also does nothing because it is also a descendant element. In fact, we can achieve the goal by not putting the checking code here, but by modifying the button's behavior.

2. Stop event propagation

The event object also provides a .stopPropagation() method, which can completely prevent the event from bubbling. Like .target, this method is a pure JavaScript feature, but cannot be used safely in a cross-browser environment. However, as long as we register all event handlers through jQuery, we can safely use this method.
Next, we will delete the check statement event.target == this we just added and add some code in the button's click handler:

Copy code The code is as follows:

$(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 in order to access the event object. You can then prevent all other DOM elements from responding to this event by simply calling event.stopPropagation(). In this way, the button click event will be handled by the button, and only the button. Clicking elsewhere on the style converter collapses and expands the entire area.

3. Default operation

If we register the click event handler to an anchor element instead of an outer

, then we have to face another problem: when the user clicks the link, the browser will load a New page. This behavior is not the same concept as the event handler we discussed, which is the default action for clicking an anchor element. Similarly, when the user presses the Enter key after editing the form, the submit event of the form will be triggered. After this event occurs, the form submission will actually occur.
If we do not want this default action to be performed, calling the .stopPropagation() method on the event object will not help, since the default action does not occur in the normal event propagation flow. In this case, the .preventDefault() method can terminate the event before triggering the default action.
Tip .preventDefault() is usually used after some validation has been completed in the context of the event. 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 corresponding fields, then we need to prevent the default action. We discuss form validation in detail in Chapter 8.
Event propagation and default operation are two independent mechanisms. When either occurs, the other can be terminated. If you want to stop both event propagation and default action, you can return false in the event handler, which is a shorthand way of calling both .stopPropagation() and .preventDefault() on the event object.

Supplement:

Copy code The code is as follows:

//Click button event (change text style)
$(document).ready(function() {
$('#switcher .button').click(function() {
$('body').removeClass();
if (this.id == 'switcher-narrow') {
$('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
$('body').addClass('large');
}

$(' #switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});

//Click the outer div of the button to trigger the event (hidden button)
$(document).ready(function() {
$('#switcher').click(function() {
$('#switcher .button').toggleClass('hidden');
});
});

The problem now is that when the button is clicked, At the same time, the hidden button event is triggered. This is caused by event bubbling.
In order to prevent the event from bubbling, you need to add a parameter to the hidden button function:

Copy the code The code is as follows:

$(document).ready(function() {
$('#switcher').click(function(even) {
if(even.target==this){
       $('#switcher .button').toggleClass('hidden');
     }
  });
});

even save the event object, even. The target attribute holds the target element where the event occurred. You can determine which element in the DOM received the event first. At this point the code ensures that the

is clicked and not its descendant elements.

This can also be done by modifying the behavior of the button to achieve the goal.

Copy code The code is as follows:

$(document).ready(function() {
$('#switcher .button').click(function(even) {
$('body').removeClass();
if (this.id == 'switcher-narrow') {
$('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
$('body').addClass ('large');
}

$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
even.stopPropagation();
});
});

Prevent event bubbling with JS

Event bubbling: When an event is triggered on an element, such as the mouse clicking a button, the same event will be triggered in all ancestor elements of that element. This process is called event bubbling; the event bubbles up from the original element to the top of the DOM tree.
You can use JS to prevent js events from bubbling. Because of the differences in browsers, the JS writing methods of IE and FF are slightly different.
IE uses cancelBubble=true to prevent it, while FF needs to use the stopPropagation method.
The next complete code:

Copy the code The code is as follows:

点击aaaa会触发上层的onclick事件，点击bbbb不会触发上层onclick事件

 
   
   
 
 
   
   
 
 
   
   
 

aaaa	bbbbb