Coffeescript:如何链接div，但如果单击子链接，则覆盖链接

Question

我觉得很难解释，所以如果您需要，请索取更多信息。

我有一个这样的div：

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

我希望div 是可点击的，并链接到带有类"链接"的属性的 href。这部分我已经完成了：

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

但是，应该发生的是，如果用户单击div 中的链接，则该链接位置优先。因此，在上面的例子中，如果您单击雅虎，它将定向到雅虎。目前，它迫使谷歌。

Answer 1

无论

链接的正常行为如何，都会发生更新window.location和后续return false（停止点击传播）的调用。

试试这个：

$('#clickable').on('click', (ev) ->
  unless $(ev.target).is('a')
    window.location = $('.link', @).attr('href') 
    false
)

Answer 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