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可以点击，并链接到类'link'的属性的href。这部分我做了：

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

但是，如果用户点击div中的链接，应该发生的情况是，链接位置优先。所以，在上面的例子中，如果你点击雅虎，它将指向雅虎。目前，它迫使谷歌。

Answer 1

这是因为事件冒泡。点击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

Answer 2

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

试试这个：

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

Coffeescript：如何链接div，但如果点击了子链接，则覆盖链接

2 个答案: