アンカータグ内のクリック可能なコンポーネントのネスト

Question

コンテンツがいっぱいの大きなDIVがあるとします。

コンテンツが、それは何もすることができ、動的であり、そしてそれはクリック可能なコンポーネントの異なる種類の含めることができます - 、私はいくつかのURLをクリック可能と経路であるとDIV自体を必要とするなど、ボタン、動画、リンク、

を同時に、私は使用可能にするために、さまざまな種類のクリック可能なコンポーネントが必要です。いずれかを押すと、DIVレベルでルーティングを呼び出すべきではありません。

私はどれも動作するようには思えない、さまざまなアプローチを試してみた：

1. タグで全体のDIVをラップ - URLへのルートDIV内の任意のクリックをし、クリック可能な要素のどれもができなくなります使用可能。さらに、Aタグをネストすることができないので、DIVの中に他のAタグを持つことができなくなります。
2. これに応じてDIVにonclickイベントを追加し、それに応じてルーティングします。これはAタグネストの問題を解決します。 。

私が見ることができる唯一の合理的な解決策は、すべてのクリック可能なコンポーネントのイベントをクリックして、それがDIVまでバブルしませんので、添付イベントでのstopPropagationを実行するために処理することです。それは、など

不明なコンテンツと機能、ビデオコントロール、とのiframeのように私の管理下にないコンポーネント、があるかもしれませんDIV内部のよう

しかし、この解決策は、異なるアプローチがあります私のためだけでは実現不可能です私は行方不明を使用することができますか？

アップデート：私は別のコンポーネントのクリックイベントとstopPropegationを管理するために先に行き

。

タグ上には素晴らしい動作します。

しかし、コントロールボタンが異なるビデオ要素がある場合、divとstopPropegationでそのDIVをラップしようとしましたが、動作していないように見えます。

アップデート2：

これは分単位で奇妙を取得している...

だから私は、ラッピングDIVでstopPropegationとのpreventDefaultの両方を追加することにより、video要素のクリックを解きます。なぜ私はpreventDefaultを使う必要があるのか​​分かりません。意味がありません。

今、別のコンポーネントに別の問題があります。私はブートストラップカルーセルを持っています。私はそれをDIVでラッピングし、そのDIV上のクリックイベントでstopPropegationを試みました。また、preventDefaultを追加しようとしました。そのDIVでstopPropegationを実行すると、カルーセルのボタンが機能しなくなります。

いくつかの助けと説明をいただければ幸いです。..

アップデート3：

私は上のルーティングを実行する場合、私は把握するために、イベントにdefaultPrevented値を使用することができます考え出しメインのDIV要素かどうか。

メインのdivをui-sref属性のAタグでラップしました（これはAngularアプリです）。そしてng-clickイベントにバインドされました。

何らかの理由（ui-srefに関連しているようです）では、jQueryのIsDefaultPreventedは常にtrueを返します。

私はAタグをDIVに置き換え、IsDefaultPrevented値をチェックした後、コントローラ内で状態の変更を実行しました。

これですべてが機能しています。しかし、私は本当に理由は分かりません。

Answer 1

私のコードを見てください。うまくいけば、これはあなたの問題を解決します。

HTMLは次のように検討している：

<div id="div1" style="width:50px;height:50px;background-color:red"> 

     <a href="#">Hello</a> 

</div> 

jsのコードは似ています。

$(document).ready(function(){ 

    $("#div1").click(function(){ 
     alert("on div1"); 
    }) 

    $("#div1 a").click(function(e){ 
     e.stopPropagation(); 
     alert("on div1 a"); 
    }) 
}) 

「こんにちは」をクリックします。 「div1 aで」アラートのみが表示されます。