他の場所をクリックしたときにメニューを非表示にする jQuery の実装方法_jquery

この記事の例では、他の場所をクリックしたときにメニューが非表示になるように jQuery を実装する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

<script type="text/javascript">
  function stopPropagation(e) {
    if (e.stopPropagation) 
      e.stopPropagation();//停止冒泡  非ie
    else 
      e.cancelBubble = true;//停止冒泡 ie
  }
  $(document).bind('click',function(){
    $('#test').css('display','none');
  });
  $('#test').bind('click',function(e){
  //写要执行的内容....吥啦不啦
    stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
  });
</script>

たとえば、div をクリックするとメニューが表示されますが、その div をクリックするとメニューが消えます。クリックするとメニューが表示されます ドキュメントをクリックするとメニューが表示されますが、divをクリックするとドキュメントをクリックしたことと同じになりますので、 で実行するステートメントを実行します。 div のクリック イベントを実行してから、js のバブリングを終了します。そうでない場合は、div のクリック イベントが実行され、ドキュメント イベントに移動してドキュメントのクリック コンテンツを実行します

。

つまり、div も document に属しているため、div をクリックすると document もクリックされ、制限がなければ、div と document のメソッドが実行されます。バブリングを停止するには div メソッドをクリックします。 具体的な方法は e.stopPropagation() → 「非 ie に適用」メソッドを使用します。ie の場合は e.cancelBubble=true

です。

もう 1 つのアイデアは、どのトリガー ソースがドキュメントのクリック メソッドであるかを決定することです。div の場合、操作は実行されません。つまり、div でない場合、メニューは非表示になります。

に続きます

イベント オブジェクトには、target(W3C)/srcElement(IE) という重要な属性が含まれています。この属性は、イベントをトリガーした元の要素を識別します。2 番目のアイデアは、この属性を使用することです。イベント ハンドラーをドキュメントのクリック イベントに直接バインドし、イベント ソースが id==test を持つ div 要素であるか、そのサブ要素であるかをイベント ハンドラーで判断できます。そうである場合、メソッドは何も実行しません。そうでない場合、イベントは非表示になります。

$(document).bind('click',function(e){
    var e = e || window.event; //浏览器兼容性
    var elem = e.target || e.srcElement;
    while (elem) { //循环判断至跟节点，防止点击的是div子元素
      if (elem.id && elem.id=='test') {
        return;
      }
      elem = elem.parentNode;
    }
    $('#test').css('display','none'); //点击的不是div或其子元素
});

さらに jQuery 関連のコンテンツに興味がある読者は、このサイトの特別トピックをチェックしてください: 「jQuery 操作 json データ テクニックの概要」、「jQuery スイッチングの特別な概要」エフェクトとテクニック"、" jQuery のドラッグ アンド ドロップの特殊効果とテクニックのまとめ"、"jQuery 拡張テクニックのまとめ"、"よくある古典的な jQuery のまとめ特殊効果」、「jQuery アニメーションと特殊効果の使い方まとめ 」、「jQuery セレクターの使い方まとめ 」、「jQuery の共通プラグインと使い方のまとめ 」 >"

この記事が jQuery プログラミングのすべての人に役立つことを願っています。