jQuery はイベントのバブリングインスタンス分析を防止します-jsチュートリアル-php.cn

jQuery はイベントのバブリングインスタンス分析を防止します

不言

リリース： 2018-07-03 14:12:59

オリジナル

1494 人が閲覧しました

この記事では、イベントのバブリングを防ぐための jQuery の方法を主に紹介し、イベントのバブリングを防ぐための jQuery の原理と一般的な実装方法を例の形で分析します。また、イベントのバブリングを防ぐための jQuery の関連操作スキルも分析します。完全な例を友達が参照できるようにする必要があります

この記事では、イベントのバブリングを防ぐ jQuery の例について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

通常の開発プロセスでは、p を p でラップする状況に必ず遭遇します (この p は要素になる可能性があります)。しかし、両方の p でイベントが存在します。内側の p をクリックすると、この p のイベントを処理したいのですが、このとき、外側の p のイベントも実行されないようにする必要があります。

平たく言えば、あなたは家でテレビを見ながら自分の狭い部屋に隠れていますが、その音が隣の親の耳に届くのを嫌って、この時下に隠れているかもしれません。ベッドや壁は非常に防音性が高く、音を遮断するということは、泡を遮断することと理解できます。

イベントのバブリングを防ぐ 3 つの方法

1. return false: デフォルトのイベントとバブリングイベントを防ぐことができますreturn false：可以阻止默认事件和冒泡事件

2、event.stopPropagation/IE下event.cancelBubble = true;：可以阻止冒泡事件但是允许默认事件

3、event.preventDefault();/IE下event.returnValue = false

2. event.stopPropagation/IE の下でcode>event.cancelBubble = true;: バブリングイベントを防止できますが、デフォルトイベントは許可します

3. event.returnValue = false の <code>event.preventDefault();/IE : デフォルトのイベントを防止できますが、バブリングイベントは許可できます

上記の 3 つのメソッドはさまざまなシナリオで使用され、合理的に使用できます。以下のコードは自分でいくつかのテストを実行できます:

<!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>

ログイン後にコピー

。結果:

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。