单击整行(保留中间单击并按住Ctrl键并单击)

Question

我有一个HTML表,第一列中有一个链接.我想允许用户单击行中的任意位置以激活该链接.同时,我想保留打开新标签/窗口的中键和ctrl +单击功能.以下是该表的示例:

<table id="row_link"> 
  <tbody> 
    <tr>
      <td><a href="link1.html">link</a></td> 
      <td>info 1</td> 
    </tr>       
    <tr>
      <td><a href="link2.html">link</a></td> 
      <td>info 2</td> 
    </tr>       
  </tbody> 
</table> 

使用jQuery我可以允许用户在一行中的任何地方左键单击:

$("table#row_link tbody tr").click(function () {
    window.location = $(this).find("a:first").attr("href");
});

这当然会禁用打开新选项卡的标准中键单击和ctrl +单击功能.有没有更好的方法允许用户点击整行,同时保留标准的中间点击和ctrl + clcik行为？

Answer 1

遗憾的是,无法在每个浏览器中模拟链接和所有相关行为.因此,实现您想要的唯一方法是在<tr>元素周围有一个跟随光标的链接; 这个链接是不可见的,所以对于用户来说,看起来他们点击了这个链接,<tr>但他们实际上是在点击隐藏的链接.使用此方法,中键,ctrl +单击和任何其他行为保持不变!

这是一个演示:http://jsbin.com/ufugo

这是代码:

$("table tr").each(function(){

    var $link = $('a:first', this).clone(true),
        dim = {
            x: [
                $(this).offset().left,
                $(this).offset().left + $(this).outerWidth()
            ],
            y: [
                $(this).offset().top,
                $(this).offset().top + $(this).outerHeight()
            ]
        }

    $link
        .click(function(){
            $(this).blur();
        })
        .css({
            position: 'absolute',
            display: 'none',
            // Opacity:0  means it's invisible
            opacity: 0
        })
        .appendTo('body');

    $(this).mouseover(function(){
        $link.show();
    });

    $(document).mousemove(function(e){
        var y = e.pageY,
            x = e.pageX;
        // Check to see if cursor is outside of <tr>
        // If it is then hide the cloned link (display:none;)
        if (x < dim.x[0] || x > dim.x[1] || y < dim.y[0] || y > dim.y[1]) {  
            return $link.hide();
        }
        $link.css({
            top: e.pageY - 5,
            left: e.pageX - 5
        })
    });

});

编辑:

我使用比上面更好的方法创建了一个jQuery插件:http://james.padolsey.com/javascript/table-rows-as-clickable-anchors/

Answer 2

编辑

这是一个简单的解决方案.我认为不需要在某些浏览器上破坏或需要处理时间的讨厌的黑客攻击.特别是因为有一个简洁的CSS解决方案.

首先是一个演示

受@Nick解决方案的启发,我提出了一个简单的css + jquery解决方案.

首先,这是我写的迷你插件.该插件将使用链接包装每个单元格:

jQuery.fn.linker = function(selector) {
    $(this).each(function() {
        var href = $(selector, this).attr('href');
        if (href) {
            var link = $('<a href="' + $(selector, this).attr('href') + '"></a>').css({
                'text-decoration': 'none',
                'display': 'block',
                'padding': '0px',
                'color': $(this).css('color')
            })
            $(this).children()
                   .css('padding', '0')
                   .wrapInner(link);
        }
    });
};

这是一个用法示例:

$('table.collection tr').linker('a:first');

以及您需要的所有CSS:

table.collection {
    border-collapse:collapse;
}

就这么简单.

您可以使用事件对象检查鼠标单击类型.该文章在讨论类似的问题.

无论如何,这是如何做到的:

$("table#row_link tbody tr").click(function () {

    if((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)){
        if (!e.ctrlKey) {
            // Left mouse button was clicked without ctrl
            window.location = $(this).find("a:first").attr("href");
        }
    }
});

Answer 3

我会从HTML/css方面攻击它.当大多数网站在表格中进行所有布局时,这曾经是一个常见问题.

首先将所有表格单元格的内容转换为链接.如果您不希望它们看起来像链接,您可以使用CSS从"非链接"单元格中删除下划线.但它们将是链接,无论如何,这在语义上都是你想要的.

接下来,您希望扩展链接以填充整个单元格.StackOverflow已经知道了这个答案:

td a { display: block; width: 100%; height: 100%; line-height: 100%; }

对于典型的表格,单元格之间没有空格,整个行都是可点击的.而且由于这不依赖于任何技巧或浏览器特定的黑客攻击,它应该可以在任何地方使用.

Answer 4

你要这个:

$('table#row_link tbody tr').mousedown( function(e){
    if(e.ctrlKey || (!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){
        //middle mouse button or ctrl+click
    } else {
        //normal left click
    }
});

这在FF3.0.10,Chrome 1.0和IE6中进行了测试.我使用mousedown事件,因为firefox或IE都没有通过鼠标中键单击到.click(fn)事件.