この記事の例では、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 プログラミング設計に役立つことを願っています。