問題タブ [event-delegation]

私.loadのページにはいくつかの があり、元々はすべて正常に機能していましたが、バックグラウンドにアニメーションを追加した後、何も機能しなくなりました。ページがロードされ、ロードするように指示したウィンドウで問題なく表示されますが、何もクリックできません。いくつかの<a>リンクを含むページと小さなフォームを含むページがあり、それらは単独で正常に動作しますが、次を使用してメインページにロードすると:

ページは正常に読み込まれますが、何もクリックできません。背景のアニメーションと画像をすべてオフにしてみましたが、何か関係があるのではないかと思いましたが、それでも機能しません。

したがって、ドキュメント内のすべての要素でタッチイベントをリッスンするこの JavaScript コードがあります。

dataCard( ) のクラスのアイテムと、アンカーではないすべての子のイベントのみをリッスンしたい場合を除いて、これは問題なく機能します。.dataCard<a>

したがって、ページの前半でjQueryを使用しているため、jQueryセレクターを作成してそれを呼び出すことで、それを修正する方法を考えまし.addEventListener()た。それはうまくいきませんでした。

これは私が試したものです：

前に言ったように、それはうまくいきませんでした。jQuery と JS が時々うまく混ざらないからだと思います。

.dataCardここで、イベントをすべてのインスタンス(現在存在するもの、またはプログラムで作成される可能性があるもの)にも委任する必要があることに気付きました。

関数を使用して jQuery ソリューション全体を使用できるようになったので、これは良いことです.on()。

これは私が試したものです：

現在、#mainは安定しており、常に存在し.dataCardます。一部が存在し、一部がプログラムで追加されるのは s です。

したがって、イベント委任に関しては、これはうまく機能します。私の問題は、これも機能していないことです。

touchstart、touchmove、touchend、およびtouchcancelが認識できるjQueryイベントではないためだと思います。

だから私の質問は、コードの最初のブロックが行うこと（これらのタッチイベントのイベントリスナーを追加する）を.dataCard、jQueryまたはプレーン/バニラjsで存在し、プログラムで作成されたすべてのインスタンスに対してのみ行うにはどうすればよいですか?

jQuery を使用して、hammer.js のマルチタッチ ジェスチャ イベントを委任しようとして.on()いますが、うまくいかないようです。

これは機能します：

しかし、これはうまくいきません:

マルチタッチ ジェスチャ イベントを取得して、Hammer.js の jQuery バージョンで委任するにはどうすればよいですか?

私はjQueryを学んでいますが、$('.className').bind('click',function(){})メソッドについて読んだとき、1つの疑問が生じました。

このメソッドは、イベント ハンドラーをclassNameDOM の各インスタンスにアタッチしますか? もしそうなら、それは良いアプローチでしょうか - イベントハンドラーをページ上の多くのインスタンスにアタッチするのはオーバーヘッドですよね?

それとも、イベント委任を利用していますか?たとえば、ハンドラーはe.target equalTo className、クリックイベントを利用して実行する共通の親にバインドされるため、ハンドラーは1つのDOM要素のみにバインドされますか?

理解を助けてください。ありがとう。

もう1つの疑い。すべての dom 要素にイベントをアタッチすると、オーバーロードはどこで有効になりますか? 実行中にブラウザーに余分な負荷がかかりますか、それとも dom が重くなりますか (つまり、dom の解析が難しくなります)?

私は ajax データで関数を使用するために live() を使用していました。

と同じように：$(".mydiv").live('click', function(){ alert("blablabla"); })

「.mydiv」であるajaxデータをクリックすると、正常に機能していました

しかし、「on」メソッドはこれをサポートしていませんか?

「i」が ajax データから来ている場合は機能しません。なんで？どうすればこれを解決できますか?

特定のアクションの各ハンドラーがターゲット要素に直接アタッチされていた古いイベント管理は、パフォーマンスとメモリ節約に関する考慮事項が開発者コミュニティに広まり始めたため、時代遅れになりつつあります。

jQuery が旧式のメソッド.bind()と.live()メソッドを新しい.on()メソッドで更新して委任を可能にしてから、イベント委任の実装が加速しました。

これにより、一部の経験豊富なアプローチの変更が決定され、イベント委任を使用する場所で手直しが必要になります。ライブラリのコーディング スタイルを維持しながら、いくつかのベスト プラクティスを考え出そうとしています。答えを見つけるために、他の開発者が直面している同様の状況を探しました。

関数をコンストラクターとして OOP を使用すると、通常、次のようなオブジェクト作成用のインターフェイスがあります。

オブジェクトリテラルを引数として指定し、渡された入力の名前と値のクリーンなマップを提供します。このコードの基礎となるクラスは、次のようになります。

「プライベート」メソッドを使用すると、コードの読みやすさとクリーンさの点でいくつかの利点が得られました (有用なメソッドのみがユーザーに公開されます)。パフォーマンスのわずかな向上 (各スコープ解決はローカル変数よりも時間がかかります) を超えています。しかし、イベント ハンドラーについて話すと、イベント委任パラダイムと衝突します。

クラスのリスナーに内部的に関連付けるために使用したメソッドを公開することを考えました。

次に、外部または別のプロキシ クラスで、次のような適切な委譲を実行します。

しかし、それは私には最善のアプローチではないように思えました。インターフェイスで役に立たないメソッドの公開に失敗したため、メインクラスにすべての情報を直接知らせて、イベントを自律的に委譲する方法をインターフェイスを介して試みました。

これにより、クラス内で内部的にプライベート メソッドを使用し続けることができます。

それについてのあなたの実践と提案は何ですか？
また、今日までに聞いた他の開発者の主な傾向は何ですか?

イベント委任のために次の関数を書き直そうとしています:

私が書き直した他のすべての関数は完全に動作しますが、これはそうではありません。ここに私が書いたものがあります：

ご覧のとおり、私はあまり変わっていません。ul は開きますが、もう閉じません。私の間違いはどこですか？

友達、

すべてのインスタンスを手動で初期化する代わりに:

jQuery プラグイン (Superfish) の複数の (そして動的な) インスタンスを使用し、イベント委任を使用して親で 1 回の呼び出しでそれらを初期化したいと思います。

しかし、これは機能しません。ドキュメントでは、現在はイベント委任を使用していると言われています: http://users.tpg.com.au/j_birch/plugins/superfish/

最後の箇条書き項目: 「•パフォーマンスと柔軟性を向上させるために、v1.5.1 の時点でイベント委任を使用します。」

jQuery の天才は何が起きているか知っていますか?

インタラクションを動的にロードされたリンクにバインドしようとしています:

HTML:

JS:

これはデスクトップでは問題なく動作し、Android では非常に短いコンテンツで動作します。

ただし、Android では長いコンテンツでは機能しません (Eclipse では JS エラーは発生しません)。それでも、作業ページと非作業ページのコンテンツの長さ以外の違いは特定していません。そのため、人為的にコンテンツの長さを制限しようとしましたが、うまく機能しています。

何が起こっているかの手がかりはありますか？

// 編集

この質問を入力するときにいくつかの基本的な間違いを犯したため、コードを更新しました。このバージョンは、コアの問題をよりよく反映しています。

// 編集

私は最終的に、競合を引き起こした原因を特定することができました。これは、コンテンツがロードされた後の div の css 更新によるものです。Weinre を使用して高さスタイル属性を人為的に削除すると、リンクは再びクリック可能になります!