jQuery子项单击href不起作用答案

【问题标题】：jQuery children a href click does not workjQuery子项单击href不起作用
【发布时间】：2011-11-17 22:03:39
【问题描述】：

我有这个代码：

<html>
<head>
<title>site</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#wlink a').click(function() {
        $('.box:visible').fadeOut('fast', function() {
            $('#' + (this.id).replace('link', '')).fadeIn('fast');
        });
        $('#wlink a').removeClass('selected');
        $(this).addClass('selected');
    });
    $('#wlink div').click(function() {
        var child = $(this).children();
        child.click();
    });
    $('#linkbox1').addClass('selected');
    $('#box1').fadeIn('fast');
});
</script>
</head>

<style>
a { outline: none; cursor: pointer; }
#wrapper { border:1px solid #cccccc; border:solid 1px #ddd; width:806px; height:255px; overflow: hidden; }
#wrapperBox { width:6000px; }
span.text { font-size:100px; color:#aaa; }
div.box { float:left; width:805px; height:255px; background:#efefef; display: none; }
#wlink div { width: 200px; text-align:center; display: block; float:left; border: solid 1px #ddd; }
a.selected { background: #eee; }
</style>

<body>
<div id="wrapper">
    <div id="wrapperBox">
        <div id="box1" class="box">
            <span class="text">Box 1</span>
        </div>
        <div id="box2" class="box">
            <span class="text">Box 2</span>
        </div>
        <div id="box3" class="box">
            <span class="text">Box 3</span>
        </div>
        <div id="box4" class="box">
            <span class="text">Box 4</span>
        </div>
    </div>
</div>
<div id="wlink">
    <div><a id="linkbox1">Box 1</a></div>
    <div><a id="linkbox2">Box 2</a></div>
    <div><a id="linkbox3">Box 3</a></div>
    <div><a id="linkbox4">Box 4</a></div>
</div>
</body>
</html>

现在我想做的是当点击 A HREF 的父 DIV 时，我想模拟 HREF 点击。但它不起作用，我得到这个错误：

too much recursion
[Break On This Error] )});return}if(e.nodeType===3||e.nodeTy...nt=="undefined"&&(b=b.ownerDocument||

我的代码有什么问题？

谢谢，J

【问题讨论】：

标签： jquery click children

【解决方案1】：

将return false; 添加到锚点的点击处理程序的末尾就足够了。问题似乎是被触发的点击处理程序然后冒泡到包含它的 div 进行无限递归循环。添加 return false 将阻止事件传播（向上到达父元素的层次结构）和执行默认操作（如果单击链接，则跟随链接）。

如果您愿意，您可以使用事件对象的各个函数（分别为 e.stopPropagation 和 e.preventDefault）来执行此操作，但是（根据我的经验）您的目标浏览器执行此操作比执行此操作更有可能出现问题使用return false; 技术同时进行。

 $('#wlink a').click(function() {
    $('.box:visible').fadeOut('fast', function() {
        $('#' + (this.id).replace('link', '')).fadeIn('fast');
    });
    $('#wlink a').removeClass('selected');
    $(this).addClass('selected');
    return false;
 })

【讨论】：

【解决方案2】：

我认为您的问题在于您将点击事件绑定到 div 和锚点（由同一个 div 包装）。因此，当有人点击 div 或其中的任何链接时，两个点击事件都会触发。

【讨论】：

【解决方案3】：

sillyMunky 是正确的，因为您的 div 点击处理程序也将被触发，从而创建一个无限循环，但他解决此问题的方法不是最佳实践。您要做的是在单击处理程序中使用e.stopPropagation() 和not return false 明确停止事件传播。使用return false 将比您需要/打算做的更多。如果您还想阻止默认点击动作并停止页面跳转，您还需要添加e.preventDefault()。

$('#wlink a').click(function(e) {
    e.stopPropagation();
    e.preventDefault(); //not part of fixing your issue, but you may want it.
    $('.box:visible').fadeOut('fast', function() {
        $('#' + (this.id).replace('link', '')).fadeIn('fast');
    });
    $('#wlink a').removeClass('selected');
    $(this).addClass('selected');
});

欲了解更多信息：Stop (Mis)using Return False

【讨论】：

我认为他想停止传播和阻止默认，最有效的方法就是返回 false。此外，我亲身经历过这两个函数的浏览器兼容性问题，但从未使用 return false。我不同意使用 return false 是一种不好的做法，有人决定在他们的博客上说它的更好做法并没有对我产生任何影响。如果他需要默认操作而不是冒泡，那么正确的答案应该是使用 e.stopPropagation。我更喜欢我更优雅的答案。
在链接中指出这些东西并提供替代方案是一个很好的选择，也许 OP 以前没有遇到过它们。但我认为声称有一个“最佳实践”，这是一个漫长的过程并没有太大帮助。
你假设他想要那个但没有明确说出来，我认为这是对你的伤害。新手需要了解什么他们的代码在做什么以及为什么他们应该以一种或另一种方式编写它。如果 OP 在了解其含义的同时想return false，那很好。什么是有害的是说“只是返回 false 以防止传播”，而并非所有返回 false 都会产生其他负面影响。我是说“这是执行您所要求的代码，这就是 return false 实际执行的操作。明智地使用。”不过真的，这没什么大不了的。
什么 e.stopPropagation(); e.preventDefault();做什么？
@Jimmy - 请参阅我上面的链接，它解释得很好。也检查一下：developer.mozilla.org/en/DOM/event.preventDefault 和 developer.mozilla.org/en/DOM/event.stopPropagation

【解决方案4】：

如果您不想更改代码，@Adam Terlson 有一个很好的解决方案。这是我的解决方案：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wlink a').click(function() {
    var l = (this.id).replace('link', '');
    $('.box:visible').fadeOut('fast', function() {
        $('#' + l).fadeIn('fast');
    });
    $('#wlink a').removeClass('selected');
    $(this).addClass('selected');
});
$('#linkbox1').addClass('selected');
$('#box1').fadeIn('fast');
});
</script>

</head>

<style>
a { outline: none; }
#wrapper { border:1px solid #cccccc; border:solid 1px #ddd; width:806px; height:255px; overflow: hidden; }
#wrapperBox { width:6000px; }
span.text { font-size:100px; color:#aaa; }
div.box { float:left; width:805px; height:255px; background:#efefef; display: none; }
a.linkBox { cursor: pointer; width: 200px; text-align:center; display: block; float:left; border: solid 1px #ddd; }
a.selected { background: #eee; }
</style>

<body>

<div id="wrapper">
   <div id="wrapperBox">
       <div id="box1" class="box">
           <span class="text">Box 1</span>
       </div>
       <div id="box2" class="box">
           <span class="text">Box 2</span>
       </div>
       <div id="box3" class="box">
           <span class="text">Box 3</span>
       </div>
       <div id="box4" class="box">
           <span class="text">Box 4</span>
       </div>
   </div>
</div>
<div id="wlink">
   <a class="linkBox" id="linkbox1">Box 1</a>
   <a class="linkBox" id="linkbox2">Box 2</a>
   <a class="linkBox" id="linkbox3">Box 3</a>
   <a class="linkBox" id="linkbox4">Box 4</a>
</div>

</body>
</html>

它没有调用任何前面的回答，而是使用没有 DIV 的 HREF 并使用 CSS 来发挥作用。这样，您就不必选择孩子、父母等...

【讨论】：

我认为这更容易理解，但我需要更改的代码太多。谢谢