javascript - 单击事件不会触发默认操作

Question

所以，我有这个 <ol>在 jQuery (1.4.2) 的帮助下附加了一些事件。一切都在 $(document).ready() 中完成-打电话。

奇怪的是点击<li>确实会在正确的 <a> 上产生点击(我可以通过取消注释 console.log() 部分看到这一点)但它不会导航 UA。为什么是这样？是否event.stopPropagation()调用event.preventDefault()内部还是什么？

我知道我能做到window.location.href = $('h3 a', this).eq(0).attr('href');在 <li> 的点击事件中但我真的很想知道为什么它不适用于点击调用。

在此先感谢各位 SOers!

代码:

HTML:

<ol class="news">
    <li>
        <img src="http://dummyimage.com/325x325/000/fff.jpg">
        <span class="date">12th of May</span>
        <h3><a href="http://example.com/lorem-ipsum">Lorem Ipsum</a></h3>
        <p>Nullam rhoncus, massa nec posuere rutrum, mauris metus ornare lacus, facilisis. Rhoncus purus dui vel lectus.</p>
    </li>
    <li>
        <span class="date">3rd of May</span>
        <h3><a href="http://example.com/lam-sum-idum">Lam sum idum</a></h3>
        <p>Mauris volutpat enim nec turpis pharetra consectetur. Cras faucibus mattis dignissim.</p>
    </li>
    <!-- many more LIs here... -->
</ol>

(是的。HTML 4.01 已经过验证。)

JavaScript:

$('.news li').click(function () {
    $('h3 a', this).eq(0).click();
}).hover(function () {
    $(this).toggleClass('hover');
}).find('h3 a').click(function (e) {
    e.stopPropagation();// prevent recursion
    //console.log(this);
});

Answer 1

这是正常的，在 anchor 上手动触发 click 不会跟随链接，在模拟操作时触发“默认事件”通常不是这种情况。设置 location.href 是前往此处的方式，如下所示:

$('.news li').click(function () {
    window.location.href = $(this).find('h3 a').attr('href');
}).hover(function () {
    $(this).toggleClass('hover');
}).find('h3 a').click(function (e) {
    e.stopPropagation(); //so ctrl+click works on the link, etc
});

顺便说一句，不需要.eq(0)，.attr('href') 会得到href从匹配集中的第一个元素开始。