0

説明が難しいので、必要に応じて詳しい情報をリクエストしてください。

私はそのようなdivを持っています：

<div id="clickable">
  <p>Some content</p>
  <a href="google.com" class="link">Google</a>
  <a href="yahoo.com">Yahoo</a>
</div>

divをクリック可能にし、クラス'link'で属性のhrefにリンクする必要があります。私が行ったこの部分：

  $('#clickable').on 'click', (ev) ->
    window.location = $(this).find('.link').attr('href')
    return false

ただし、ユーザーがdiv内のリンクをクリックすると、そのリンクの場所が優先されます。したがって、上記の例では、yahooをクリックするとyahooに移動します。現時点では、それはグーグルを強制します。

4

2 に答える 2

2

これは、イベントのバブリングが原因です。aバブルをクリックするdivと、clickハンドラーが起動し、divにリダイレクトされます.link。JavaScriptはシングルスレッドであるため、最上位のハンドラーが最後のハンドラーとして起動され、常ににリダイレクトされ.linkます。

このコードを追加してみてください：

$('#clickable').on 'click', 'a', (ev) ->
    ev.stopPropagation()

'a'フィルターがa要素にクリックする部分を忘れないでください。そこでjQueryのフィルターを使用できます。

編集

不明な理由で、私が投稿したスニペットが機能しないので、これはどうですか？（今回はコードを置き換えます）

$('#clickable').on 'click', (ev) ->
    if ev.target.href
        window.location = ev.target.href
        return
    window.location = $(this).find('.link').attr('href')
    return false
于 2012-06-27T10:08:40.520 に答える
2

リンクの通常の動作に関係なく、更新window.locationとその後の呼び出しreturn false（クリックの伝播の停止）が発生しています。

これを試して：

$('#clickable').on('click', (ev) ->
  unless $(ev.target).is('a')
    window.location = $('.link', @).attr('href') 
    false
)
于 2012-06-27T10:25:23.703 に答える