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

WBOY
リリース: 2016-05-16 16:14:18
オリジナル
1580 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート