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

我觉得很难解释，所以如果您需要它，请请求更多信息。Coffeescript：如何链接div，但如果子链接被点击，则覆盖链接

我有一个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内的链接，链接位置优先。所以，在上面的例子中，如果你点击雅虎，它将直接访问雅虎。目前，它强制谷歌。

来源

2012-06-27 Damien Roche

的调用来更新window.location和随后return false（停止点击的传播），而不管链接的正常行为正在发生的事情。

试试这个：

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

来源

2012-06-27 10:25:23 wombleton

哦哇，非常优雅:) –

这是因为事件冒泡。点击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-27 10:08:40 freakish

谢谢，但我觉得这不符合我的要求。整个div应该是可点击的。如果我只是想要点击链接，我根本不会使用js。有任何想法吗？ –

@ Zeph我写了“添加此代码”，而不是“替换”。 **添加**两行**。 – freakish

我也添加了这段代码。但不起作用，因为您正在过滤所有'a'元素，所以主div不会触发。即使我删除ev.stop ...并添加'a'过滤器，如果我点击div中不是链接的地方，也不会有任何反应。 –

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

回答

相关问题