問題タブ [event-bubbling]

私はいくつかの最新のブラウザでテストしましたが、一貫性のない結果になりました。イベントサポートの違いをキャプチャすることとバブリングすることと関係があると確信しています。ここで問題を再現するためのテスト環境をセットアップしました：pastebinとこのサービスを使用してライブプレビューを実行します。

問題はこれです：祖先がバブリングを防ぐとき、いくつかのブラウザはアンカーhrefクリックイベントを無視します。真ん中の要素はバブルダウンする前にイベントを発生させますが、アンカー要素は発生しないため、意味がありません。javascriptのclickイベントは機能するのに、hrefイベントは機能しないのはなぜですか？

「クリックして」を押したときの結果は次のとおりです。

Chrome 9.0.597.98：hrefは無視されます+内側と外側が印刷されます

IE 8.0.6001.19019：hrefWorks+内側と外側が印刷されます

Firefox 3.6.13：hrefは無視されます+内側と外側が印刷されます

したがって、私の最終的な質問は、祖先要素がイベントバブルを防止しているときにhrefをクロスブラウザで動作させるにはどうすればよいですか？任意の洞察をいただければ幸いです。

編集：

ポインティのコメントで議論が続いていることを指摘したいと思います。また、彼の多大な助けに感謝したいと思います。

私のコードはhtmlで次のようなものです：

そして、deligate() jquery メソッドを使用して要素をバインドします (要素が動的に表示されるため)

私の問題は、「.anchor」をクリックすると両方のイベントが発生することです。このコンテキストで event.stopPropagation() を使用する方法を教えてもらえますか? 上記のように試しましたが、うまくいきませんでした。これを行う他の方法はありますか？

編集: event.isPropagationStopped() を呼び出してみましたが、true が返されます。それでも両方のイベントが呼び出されます。

子ユーザー コントロールから親にイベントをバブルしようとしています。

子ユーザー コントロールは、グリッド内のボタンです。

親ユーザー コントロールは、子コントロールの多くのインスタンスで構成されます。

私が定義した子ユーザーコントロールで：

「内側」のボタンは、次の方法でクリック イベントを処理します。

何が起こっているのかを確認しようとしましたが、Button_Click が呼び出され、CustomClick が null ではなく、実行されることがわかります。ただし、何も起こらないようです。親のユーザーコントロールでもそれに付随するコードは呼び出されません。

なにか提案を？

前もってありがとう、乾杯、ジャンルカ。

私はASP.NETアプリケーション用の複合コントロールを開発していますが、たまたま最初にITemplateを使用して子コントロールを作成するためのコントロールを開発しました。ルートコントロールで処理される一連のボタンが子コントロール内にあります。ボタンのCommandName/CommandArgumentプロパティでOnBubbleEventを使用して、すべてを接続しています。そして、すべてがうまく機能しました...テンプレートをコントロールに変更するまで。

テンプレートをコントロールに変換し、InstantiateIn（this）ではなくルートコントロールでControls.Add（new ChildControl（））を呼び出すと、イベントバブリングが機能しなくなりました。

なぜですか？

（すべて、そして私はすべてを意味します、それ以外は同じです。）

興味深い状況があります。現在、「展開」ボタンをクリックすると、対応する非表示のテーブル行が表示されます。展開ボタンを含む元の (非表示にされていない) 行の特定のセルには、クリックすると編集可能になるコンテンツもあります。展開ボタンを取り除き、クリックすると編集可能になるフィールドを含め、行自体のどこでもダブルクリックして行を展開できるようにしたいと思います。ここですでに問題の匂いがします。

行をダブルクリックすると、dblclick が発生する前に、最初に 2 つのクリック イベントが発生します。これは、フィールドをダブルクリックすると、編集可能なフィールドに変わり、行が展開されることを意味します。これを防ぎたいと思います。ダブルクリックでシングルクリックの発火を防ぎ、シングルクリックを通常どおり実行したい。

event.stopPropagation() の使用は、2 つの異なるイベントであるため、明らかに機能しません。

何か案は？

編集（いくつかの半疑似コード）：

元のバージョン：

希望のバージョン:

乾杯

e.stopPropagation()イベントを伝播する必要がなくなった場合 (ほぼ 100% の場合) に呼び出す方が有益かどうか、またはそうすると実際に不必要なオーバーヘッドが発生し、イベントを停止する利点が相殺されるかどうかを測定したいと考えています。e.stopPropagation()完全に呼び出さない方が実際にはより有益であるという点まで伝播しますか?

基本的に私が興味を持っているのは、 この種のものをどのように測定するかということです.

背景をクリックすると、背景色を変更できるカラーピッカーが表示される小さなサイトを作成しています。

問題は、イベントのバブリングにより、どこをクリックしてもこのカラーピッカーが表示されることです。ここでの解決策は、ページ全体のすべての HTML 要素に「return false」を追加することではないと思います。これについて何ができますか？

Javascript:

HTML の概要は次のとおりです。

ページレイアウトは、ヘッダーとフッターの背景と同じ色とコンテンツが異なるものです。

ヘッダーまたはフッターをクリックしてその色を変更すると、その色は実際には本文の背景であるため、両方が変更されます。コンテンツはコンテンツのみを変更します。

デリゲート ソリューションの問題は、今ではまったく機能しないことです。stoppropagation メソッドは基本的に同じことを行います。

一部の伝播をオンにする必要がありますが、すべてではありません。

ほとんどのイベントはすべてのブラウザでバブルします。ただし、InternetExplorerでは「送信」イベントがバブルしないことを私は知っています。バブルしない他のイベントは何ですか？

私は Web サイト用の AutoSuggest ウィジェットを作成しています。これは、ユーザーが入力テキスト ボックスに何かを書き込むと、提案のある div が表示され、ユーザーはマウスまたは上下の矢印でナビゲートできるように機能します。各単語は個別に提案されます (Google では、フレーズ全体のどこに表示されるかを提案するのとは異なります。

Google Chrome の入力ボックスに問題があります。上矢印または下矢印を押すと、ブラウザのデフォルトの動作が発生するためです。キャレットを使用して、テキスト ボックスの最後または最初に移動します (ホーム ボタンや終了ボタンなど)。Firefox や Internet Explorer ではそのような影響はありません。この効果を無効にするにはどうすればよいですか?

イベントハンドラー関数から「false」を返しています http://www.javascripter.net/faq/canceleventbubbling.htmの関数も使用しましたが、それでもキャレットはChromeでジャンプしています...

編集：Safariでも同じ効果...

誰かが私に理由を説明できますか

こうやっても自分を呼んでいるように振る舞う

あたかも彼らが他の人ではなく自分自身を呼んでいるかのようです。

編集

私が達成したかったのは、ロード時に一度実行するように強制することであることに気づきました。上記のコードは意味がありますか?