0

私は次のようなDOM構造を持っています：

<div class="hotspot">
    <div class="hotspot_inner">
        <div class="hotspot_info">
            <div class="inner_box">
                <h2><%= hotspot.info.title %></h2>
                <p><%= hotspot.info.description.html_safe %></p>
            </div>
        </div>
    </div>
</div>

また、クリック時にホットスポット内のすべて（「.hotspot_inner」以下）を表示するクラス「.hotspot」を持つものにクリックイベントリスナーをアタッチするCoffeeScriptもあります。

'.hotspot'クラスで何かをクリックすると、内部のすべてがもう一度非表示になります。

問題は、ホットスポット内の何かをクリックすると、その親に関連付けられたクローズイベントもトリガーされることです。

stopPropagation（）を試しましたが、役に立ちませんでした。.liveにはこのような問題があると聞きましたが、ホットスポットは動的に追加されるため、使用する必要があります。

何か案は？

4

3 に答える 3

1

event.targetを確認してください。

    if (event.target.className === 'hotspot') {
        // do stuff
    }
于 2012-12-06T22:47:58.970 に答える
1

イベントがすでに伝播されているため、への呼び出しは機能しstopPropagation()ません。これが「ライブ」メカニズムの仕組みです。

代わりにできることは、おそらくイベントオブジェクト自体のどこかにフラグを設定することです。親ハンドラーはそれをチェックして、何もしないことになっていることを知ることができます。

または、jQueryがイベントオブジェクトの「ターゲット」プロパティとして正規化するイベントターゲットを確認することもできます。親ハンドラーがターゲットではないことを確認した場合、イベントをスキップできます。これは、インタラクションパターンの性質とDOMの構造によっては、注意が必要な場合があります。

.live()数年前から廃止されていることを知りたいと思うかもしれません。ライブラリの現在のバージョンでは.on()、との機能を組み合わせたを使用する必要が.bind()あり.delegate()ます。

于 2012-12-06T22:48:57.260 に答える
1

必要なのは、.hotspotクラスをクリックしたときに、内部の何かを切り替えたい場合、.hotspot_innerクラス（テキストなど）内の何かをクリックした場合、.hotspotでクリックイベントをトリガーしたくないということです。その場合は、stopPropagation（）が.hotspot_innerクリックイベント内にあることを確認する必要があります。

    $('.hotspot_inner').click(function(event){
        event.stopPropagation();

    })​

それがあなたが望むものであるならば、ここを見てください：http: //jsfiddle.net/5JJEd/

于 2012-12-06T23:07:09.283 に答える