单击整行（保留中间单击并单击Ctrl +） [英] Click Entire Row (preserving middle click and ctrl+click)

问题描述

我有一个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行为？

解决方案

不幸的是，没有办法在每个浏览器中模拟链接和所有关联的行为。因此，实现您想要的唯一方法是在< tr> 元素之间具有跟随游标的链接;这个链接是不可见的，所以对用户来说，它看起来像是点击< tr> ，但实际上点击一个隐藏的链接。使用这种方法，中间按钮，ctrl +点击和任何其他行为都保持不变！

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

这里是代码：

  $（table tr）each（function（）{
 
 var $ link = $（'a：first'，this）.clone（true），
 dim = {
x：[
 $（this）.offset（）。left，
 $这个）.offset（）。left + $（this）.outerWidth（）
]，
y：[
 $（this）.offset（）。top，
 $这个）.offset（）。top + $（this）.outerHeight（）
] 
} 
 
 $ link 
 .click（function（）{
 $（this）.blur（）; 
}）
 .css（{
 position：'absolute'，
 display：'none'，
 / / Opacity：0表示它是隐形的
 opacit y：0 
}）
 .appendTo（'body'）; 
 
 $（this）.mouseover（function（）{
 $ link.show（）; 
}）; 
 
 $（document）.mousemove（function（e）{
 var y = e.pageY，
x = e.pageX; 
 //检查是否光标位于< tr> 
之外//如果它隐藏克隆的链接（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插件使用比以上更好的aproach： http：// james.padolsey.com/javascript/table-rows-as-clickable-anchors/

I have an HTML table with a link in the first column. I want to allow the user to click anywhere in the row to activate that link. At the same time, I would like to preserve the middle click and ctrl+click functionality of opening a new tab/window. Here is an example of the table:

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

Using jQuery I can allow the user to left click anywhere in a row:

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

This of course disables the standard middle click and ctrl+click functionality of opening a new tab. Is there a better way to allow users to click on the entire row while preserving the standard middle click and ctrl+clcik behavior?

解决方案

Unfortunately there is no way to simulate a link and all associated behaviour in every browser. Therefore, the only way to achieve what you want is to have a link that follows the cursor around the <tr> element; this link would be invisible so, to the user, it looks like they're clicking on the <tr> but they're actually clicking on a hidden link. Using this method, the middle-button, ctrl+click and any other behaviours are left intact!

Here's a DEMO: http://jsbin.com/ufugo

And here's the code:

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

});

EDIT:

I created a jQuery plugin using a slightly better aproach than above: http://james.padolsey.com/javascript/table-rows-as-clickable-anchors/

这篇关于单击整行（保留中间单击并单击Ctrl +）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！