Block jquery events from bubbling

Source: Internet
Author: User

Query-to-dom event triggering has a bubbling feature. Sometimes this feature can be used to reduce duplication of code, but sometimes we don't want events to bubble. This time will stop jquery.event bubbling.

At the beginning of Jquery.event's documentation, it was known that the Jquery.event object was an event object that met the standards of the Internet, while jquery.event removed the steps to check for compatible ie.

Jquery.event provides a very simple way to prevent event bubbling:event.stoppropagation ();

JS Code
    1. $ ("P"). Click (function(event) {
    2. Event.stoppropagation (); //Do something
    3. })

However, this method has no effect on events that use live bindings and requires an easier way to prevent events from bubbling:return false;

JS Code
    1. $ ("P"). Live ("click", function() {
    2. $ (this). After ("another paragraph!");
    3. return false;
    4. });

In addition JavaScript prevents bubbling

There are two ways to prevent bubbling events, the first is the method of IE, the second is the DOM method, as for why to be divided into two methods to discuss, here is not to discuss, in short, the browser some crappy problem, good nonsense not to say, directly paste code:

JS Code
    1. //block bubbling events   
    2.  function  stopbubble (e)  {  
    3.       if   (e && e.stoppropagation)  { //non ie   
    4.           e.stoppropagation ();   
    5.      }  
    6.      else  { //ie   
    7.           window.event.cancelbubble = true ;   
    8.      }  
    9.  }  

For example: Google's home page more options, do not know can go to see http://www.google.com/.
Here to apply two click events, one is Div.onclick, the other is Document.onclick, then the problem arises, in the call Div.onclick, due to the presence of bubbling events, will automatically call Document.onclick, because the order of bubbling is from the inside out

(div->body->document->html) So the Div.onclick event will be overwritten, it will not be executed, the solution is actually very simple oh, is to stop the bubbling event when executing Div.onclick, then how to stop it, just call the function above OK! Ha ha!
PS: In the introduction of the way to block the default browser behavior, similar, here will not repeat it.

JS Code
  1. function Stopdefault (e) {
  2. //block default browser action (web)
  3. if (e && E.preventdefault)
  4. E.preventdefault ();
  5. how to block the default action of a function in//ie
  6. Else
  7. Window.event.returnValue = false;
  8. return false;
  9. }

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.