将点击事件添加到 Div 并转到找到的第一个链接

Posted

技术标签:

【中文标题】将点击事件添加到 Div 并转到找到的第一个链接【英文标题】:Add click event to Div and go to first link found 【发布时间】:2011-02-08 10:53:24 【问题描述】:

我想我已经花了太多时间研究这个功能,只是在试图找出一个干净的好方法来完成它。

这是一个 jQuery 函数,可将点击事件添加到任何具有 click CSS 类的 div。当点击div.click 时,它会将用户重定向到其中找到的第一个链接。

function clickabledivs() 
    $('.click').each(
        function (intIndex) 
            $(this).bind("click", function()
                window.location = $( "#"+$(this).attr('id')+" a:first-child" ).attr('href');
            );
        
    );

虽然我很确定有更好的方法来完成它,但代码很简单,特别是我正在使用的选择器:$( "#"+$(this).attr('id')+" a:first-child" )。一切看起来漫长而缓慢。有任何想法吗?

如果您需要更多详细信息,请告诉我。

PS:我在这里从 Project2k.de 中找到了一些非常好的 jQuery 基准测试参考: http://blog.projekt2k.de/2010/01/benchmarking-jquery-1-4/

【问题讨论】:

【参考方案1】:

根据您拥有的这些div.click 元素的数量,您可能希望使用事件委托来处理这些点击。这意味着对所有具有 click 类的 div 使用单个事件处理程序。然后,在该事件处理程序中,您的回调将根据事件的来源div.click 执行。像这样:

$('#div-click-parent').click(function (event)

    var $target = $(event.target); // the element that fired the original click event
    if ($target.is('div.click'))
    
        window.location.href = $target.find('a').attr('href');
    
);

更少的事件处理程序意味着更好的扩展 - 更多的 div.click 元素不会减慢您的事件处理速度。

【讨论】:

哇,感谢您的快速回答。该功能肯定可以进一步优化。我会坚持熊会吃你建议的那个。所有 div 点击只需一个事件。谢谢!! 只是一个快速的调整,"if ($target.is('div.click')" 需要一个额外的 ) 在最后。再次感谢! 感谢这个简单的解决方案,试图使 div 基于 h3 标题 a href 可点击,这很有效!【参考方案2】:

使用 jQuery 1.7+ 优化委托

$('#div-click-parent').on('click', 'div.click', function () 
   window.location.href = $(this).find('a').attr('href');
);

【讨论】:

【参考方案3】:

与其在加载时绑定所有点击,不如在点击时绑定它们?应该更优化。

$(document).ready(function() 
   $('.click').click(function() 
        window.location = $(this).children('a:first').attr('href');
        return false;
    );
);

【讨论】:

您在哪里看到有关绑定加载点击的任何信息?【参考方案4】:

我可能会做类似的事情;

$('.click').click(function(e)
  window.location.href = $(this).find('a').attr('href');
);

【讨论】:

+1 因为你是第一个不认为它是直系子女的人! 我很确定他的意思是 'a' 而不是 a

以上是关于将点击事件添加到 Div 并转到找到的第一个链接的主要内容,如果未能解决你的问题,请参考以下文章

将drupal commerce产品添加到购物车,无需以编程方式重新加载页面

确保在转到下一页之前发送了Google Analytics事件

链接到锚点并强制重新加载当前页面

保存并转到新记录后如何重置表单的格式

js或者jQuery怎样得到指定div下的指定a标签

Windows 8 应用程序将点击事件添加到超链接按钮不起作用