Javascript 单击整行（保留中键单击并按住ctrl+；单击）

我有一个HTML表格，第一列有一个链接。我希望允许用户单击行中的任意位置以激活该链接。同时，我希望保留打开新选项卡/窗口的中键单击和ctrl+click功能。以下是该表的一个示例：

<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> 

---

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

您可以抓取事件并查看其事件代码。但是没有真正的方法知道浏览器在这些事件中的行为。

您需要删除标记

只需使用“href”属性获取链接目的地，不要也选择锚标记，因为它包含href属性

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

     window.location = $(this).attr("href");

});

或者简单地让链接打开一个新选项卡

---

我希望这能对您有所帮助。

这里有一些应该有效的方法：不使用window.location，而是使用us.click（）模拟单击元素内部的第一个元素。另外，使用条件来检查CTRL+Click

应该是这样的：

$("table#row_link tbody tr").click(function (e) {
    if(e.ctrlKey) { 
        // Run Ctl+Click Code Here
    } else { 
        $(this).children('a').eq(0).click(); 
    }
}

希望这有帮助

戴夫·罗梅罗编辑

这是一个简单的问题，有一个简单的解决方案。我不认为有必要进行可能会在某些浏览器上中断或占用处理时间的恶意黑客攻击。特别是因为有一个简洁简单的CSS解决方案

首先，这里有一个

受一个非常类似问题的启发，我提出了一个简单的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);
        }
    });
};

以及您需要的所有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");
        }
    }
});

---

尝试在td周围放置a，然后将display:block CSS元素应用于td

这将使td的整个区域可以作为“正常”链接使用所有按钮进行单击

举个例子可能更好：

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

信息1
信息2

类似的方法在过去对我很有效，尽管它并不完全适用于表元素。未经表格测试，因此请尝试。

我认为该软件会满足您的要求。这是我的建议

• ，及
• 也是

您想要这个：

$('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）事件。

不幸的是，无法在每个浏览器中模拟链接和所有相关行为。因此，实现所需的唯一方法是在

元素周围的光标后面有一个链接；这个链接是不可见的，因此，对于用户来说，看起来他们在点击

，但实际上他们在点击一个隐藏的链接。使用此方法，中间按钮、ctrl+单击和任何其他行为都保持不变

这里有一个演示：

下面是代码：

$("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
        })
    });

});

$（“表tr”）。每个（函数（）{
var$link=$（'a:first'，this）.clone（true），
尺寸={
x:[
$（此）.offset（）左，
$（this.offset（）.left+$（this.outerWidth（））
],
y:[
$（此）.offset（）.top，
$（this.offset（）.top+$（this.outerHeight（））
]
}
$link
。单击（函数（）{
$（this.blur（）；
})
.css({
位置：'绝对'，
显示：“无”，
//不透明度：0表示不可见
不透明度：0
})
.附于（“主体”）；
$（this.mouseover（function（））{
$link.show（）；
});
$（文档）.mousemove（函数（e）{
变量y=e.pageY，
x=e.pageX；
//检查光标是否位于外部
//如果是，则隐藏克隆的链接（显示：无；）
如果（xdim.x[1]| | ydim.y[1]）{
返回$link.hide（）；
}
$link.css({
顶部：e.pageY-5，
左：e.pageX-5
})
});
});

编辑：

---

我创建了一个jQuery插件，使用了比上面稍好一点的方法：

你可以创建一个链接，让它在你的tr中四处游荡，等待mouveover事件、更新href和位置

创建一个像素链接

<table id="row_link">....</table>
<a id="onepixel" style="position:absolute;z-index:1000;width:1px;height:1px;"></a>

---

我将从HTML/css方面对此进行攻击。当大多数站点都在表中进行布局时，这曾经是一个常见的问题

首先将所有表格单元格的内容制作成链接。如果您不想让它们看起来像链接，可以使用CSS从“非链接”单元格中删除下划线。但它们将是链接，这在语义上是你想要的

接下来，要使链接展开以填充整个单元格。StackOverflow已经知道：

td-a
{
显示：块；
宽度：100%；
身高：100%；
线高：100%；
}

---

对于单元格之间没有空格的典型表格，整行都可以单击。由于这不依赖于任何技巧或特定于浏览器的黑客攻击，因此它应该在任何地方都有效。

不过，感谢您的想法，它只允许用户单击实际链接，而不是在行中的任何位置。另外，我不知道为什么删除tbody标签会有帮助。我刚刚意识到，也许您希望两个TD都可以在同一行中单击。我的建议仅适用于包含实际锚的特定TD。我想您仍然可以将相同的概念应用于TR而不是TD。只需将A移到TR外部，使其“包围”它……显然，现在将display:block应用于TR。而不是TD。是的，为什么不呢？如上所述，我还没有机会测试它，但是既然该方法适用于其他元素，为什么不试试呢

$("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
        })
    });

});

<table id="row_link">....</table>
<a id="onepixel" style="position:absolute;z-index:1000;width:1px;height:1px;"></a>

$("#row_link tr").mouseover(
   function(event){
      //update href
      $("#onepixel").attr("href",$(this).find("a:first").attr("href"));
      //update position, just move to current mouse position
      $("#onepixel").css("top",event.pageY).css("left",event.pageX);
   }
);