jQuery prevents event bubbling instance analysis-JS Tutorial-php.cn

jQuery prevents event bubbling instance analysis

不言

Release： 2018-07-03 14:12:59

Original

1523 people have browsed it

This article mainly introduces the method of jQuery to prevent event bubbling. It analyzes the principles and common implementation methods of jQuery to prevent event bubbling in the form of examples. It also analyzes the related operation skills of jQuery in preventing event bubbling in the form of complete examples. , Friends who need it can refer to

The example in this article describes how jQuery prevents events from bubbling. Share it with everyone for your reference. The details are as follows:

In our usual development process, we will definitely encounter the situation of wrapping a p in a p (this p can be an element). However, between these two Events have been added to each p. If you click on the p inside, we want to handle the event of this p. However, we do not want the event of the outer p to be executed as well. At this time, we need to prevent bubbling.

To put it more simply, you are watching TV at home and hiding in your own small room, but you don’t want the sound to reach the ears of your parents next door. At this time, you may hide under the quilt or against the wall. The sound insulation effect is very good, blocking sound can be understood as preventing bubbling.

Three ways to prevent event bubbling

1. return false: You can prevent default events and bubbling events

2. event.stopPropagation/IEevent.cancelBubble = true;: Can prevent bubbling events but allow default events

3.event. preventDefault();/Under IEevent.returnValue = false: You can prevent default events but allow bubbling events

The above three methods are used in different scenarios and can be reasonable Application, the following is the code, you can do some tests yourself:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQuery阻止冒泡</title>
  <style>
    .p1{
      width: 140px;
      border: 1px solid blue;
    }
    .p2{
      width: 100px;
      height: 100px;
      margin: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<p class="p1">
  <p class="p2">
    点我呀！！！！
  </p>
</p>
<a href="http:www.baidu.com" rel="external nofollow" id="a1">百度</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(&#39;.p1&#39;).bind(&#39;click&#39;,function(){
    alert("p1");
  });
  $(&#39;.p2&#39;).bind(&#39;click&#39;,function(){
    alert("p2");
//    return false;//也可以通过return false 阻止冒泡
    if(window.event){//IE下阻止冒泡
      event.cancelBubble = true;
    }else{
      event.stopPropagation();
    }
  });
  $(&#39;#a1&#39;).bind(&#39;click&#39;,function(){
    if(window.event){//IE下阻止默认事件
      event.returnValue = false;
    }else{
      event.preventDefault();
    }
    alert("我是链接");
    //return false;//如果不添加任何阻止事件，先弹框，后跳转，我们可以通过return false阻止跳转
  });
</script>
</body>
</html>

Copy after login

Running results:

The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Select a specific tab based on Jquery easyui

Using jQuery to implement @ ID floating display in WordPress

The above is the detailed content of jQuery prevents event bubbling instance analysis. For more information, please follow other related articles on the PHP Chinese website!