0

基本的にモバイル ブラウザーのイベントとして機能する jQuery 用の一連のプラグインを作成しました。ここでそれらを見ることができます > http://ben-major.co.uk/2011/11/jquery-mobile-events/ .

現在、これらは などによって呼び出されてい$(ele).tap(handler)ますが、カスタム イベントを発生させる機能も追加して、 などを使用して関数を利用できるようにしたいと考えています$(ele).on('tap', handler);。

現在、次のコードを使用していますが、これは機能していないようです。

$(function() {
    $('*').tapstart(function() { $(this).trigger('tapstart'); })
          .tapend(function() { $(this).trigger('tapend'); })
          .tap(function() { $(this).trigger('tap'); })
          .doubletap(function() { $(this).trigger('doubletap'); })
          .taphold(function() { $(this).trigger('taphold'); })
          .swipedown(function() { $(this).trigger('swipedown'); })
          .swipeup(function() { $(this).trigger('swipeup'); })
          .swipeleft(function() { $(this).trigger('swipeleft'); })
          .swiperight(function() { $(this).trigger('swiperight'); });
});

これは、私の問題を示すためのjsFiddleです。明らかに、2 番目のクリックdivは最初のアクションを模倣する必要がありますが、上記のバインディングが解析された後に DOM に追加されたため、そうではありません。

私の質問は、私が望むものを達成するための最良の方法は何ですか? 現在および将来的に DOM に存在するすべての要素を選択する方法はありますか (可能であれば、livequeryや外部プラグインなどを使用したくありません)。

4

1 に答える 1

1

あなたの場合、jQuery がカスタム イベントを適切に処理するとは思いません (カスタム イベントはドキュメントにバブルアップされないため)。答えは、イベント リスナーのブランチを にバインドすることdocumentです。この状況ではjQueryを永久に使用しないでください。

jQuery のライブ モードは、私が提案したのとほぼ同じことを行いますが、event.target をバインドされたセレクター (質問では「*」と言ってください) と一致させようとしますが、これは非常に低速です (モバイルのバッテリーを消耗します)。

要素の特定のタイプまたは特定のクラス名とやり取りしたい場合は、自分で処理し、目的のイベント ハンドラーを起動します。

例：

function findAncestorOfType(el, type) {
  while (el && !(el instanceof type))
    el = el.parent;
  return el;
}

document.addEventListener('click', function(evt) {
  var target = findAncestorOfType(evt.target, LIElement);
  if (target) {
    // distinguish event type
    type = 'click';
    callbacks[type](target, evt);
  }
}, false);
于 2012-05-17T10:41:48.000 に答える