zepto.js_javascriptスキルのバブリングを防ぐタップイベントの実装方法

この記事の例では、zepto.js でのバブリングを防ぐためにタップ イベントを実装する方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

現在、Web サイトのモバイル版を作成中です。当初は jQuery Mobile を使用したかったのですが、ファイルが大きすぎたので、zepto.js を使用しました。

モバイルWebページでクリックイベントを使用すると遅延が発生するため、zepto.jsのタップイベントを使用します。

クリックイベントを使用すると、stopPropagationを使用してバブリングを防ぐことができますが、このメソッドはタップに対して無効です

次に、このような効果を実現する必要があります。a.btn ボタンをクリックしてから div.panel を表示し、非 div.panel をクリックしたときに div.panel を非表示にします

$("a.btn").on("tap",function(e){
  e.stopPropagation();//该方法不起作用
  $("div.panel").show();
});
$(document).on("tap",function(e){
  $("div.panel").hide();
});

デバッグ ツールを通じて、e オブジェクトにターゲット属性があることを取得できるため、この属性を使用して目的の効果を実現できます。

$("a.btn").on("tap",function(){
  $("div.panel").show();
});
$(document).on("tap",function(e){
  if(!$(e.target).hasClass("btn")){
    $("div.panel").hide();
  }
});

これが解決策です

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。