Javascript 在包含链接的表格行中使用 onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8620727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using onClick in a table row that also has links in it
提问by Shackrock
I'm using onClick in table rows as follows:
我在表行中使用 onClick 如下：
<tr onmouseover="this.style.cursor='pointer'" onclick="http://www.whatever.com/index.php?var={$foo1}">
I also have some needs to put a link in certain areas in this table row, i.e.
我也有一些需要在这个表格行的某些区域放置一个链接，即
<td>Stuff Here</td>
<td>Stuff Here</td>
<td>Stuff Here</td>
<td><a href="specialLink.php?var={$foo2}">Here</a></td>
<td>Stuff Here</td>
The problem is, the "inner link" (specialLink.php) can't be clicked, because the row link takes precedence. Do I have any options here?
问题是，无法点击“内部链接”（specialLink.php），因为行链接优先。我在这里有什么选择吗？
Thanks
谢谢
采纳答案by Kevin
I 'll do that :
我会去做 ：
<script type="text/javascript">
var link=true;
</script>
<tr onmouseover="this.style.cursor='pointer'" onclick="if (link) window.location ='http://www.whatever.com'">
<td>Stuff Here</td>
<td>Stuff Here</td>
<td>Stuff Here</td>
<td onmouseover="link=false;" onmouseout="link=true;"><a href="specialLink.php">Here</a></td>
<td>Stuff Here</td>
回答by Marcelo Amorim
You can use stopImmediatePropagation() to bypass consecutive/incoming events.
您可以使用 stopImmediatePropagation() 绕过连续/传入事件。
Short example:
简短示例：
<tr onclick="alert('tr event')">
<td>tr event</td>
<td onclick="alert('td');event.stopImmediatePropagation();">NO tr event</td>
</tr>
Test this on jsfiddle: http://jsfiddle.net/g8Anh/6/
在 jsfiddle 上测试这个：http: //jsfiddle.net/g8Anh/6/
回答by Purag
回答by Niet the Dark Absol
I would actually put an event on the entire table, not each row. Especially if you have hundreds. So...
我实际上会在整个表上放置一个事件，而不是每一行。特别是如果你有数百个。所以...
<table id="links" style="cursor: pointer;">
<tr data-var="{$foo1}">
<td><a href="http://example.com/">Link</a></td>
<td>Another cell</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('links').onclick = function(e) {
e = e || window.event;
var t = e.srcElement || e.target;
if( !t.tagName) t = t.parentNode; // some browsers treat text nodes as potential targets
while( t != this) {
if( t.tagName == "A") break;
if( t.getAttribute("data-var"))
location.href = "http://example.com/index.php?var="+t.getAttribute("data-var");
}
};
</script>
This method does not pollute the global scope, and uses a single event which is always more efficient than one per row.
此方法不会污染全局范围，并且使用单个事件总是比每行一个事件更有效。
回答by LiquidityC
on the td element surrounding your link put the following attr:
在链接周围的 td 元素上放置以下属性：
<td onclick="event.cancelBubble=true;">your link with event</td>
This is how we solve it for IE at my work
这就是我们在我的工作中为 IE 解决它的方法
回答by user8109
Try putting an id on the table cell and use jQuery to handle the click event. For example...
尝试在表格单元格上放置一个 id 并使用 jQuery 来处理点击事件。例如...
<tr id="row1">
<td id="cell1" class="table_cell">etc</td>
<td id="cell2" class="table_cell">etc</td>
</tr>
Your jQuery code can the trap each click via the table cell's class as follows...
您的 jQuery 代码可以通过表格单元格的类捕获每次点击，如下所示......
$(".table_cell").click(function(){
// Activated by a click on any table cell with the class "table_cell"
var cell_id = $(this).attr("id"); // Loads id of td element clicked on
// Insert code that deals with a click on that specific table cell here...
});
You might even try putting the URL in a title tag, retrieving it in a similar manner as I retrieve the id above, thus eliminating a lot of messy javascript and if/then code.
您甚至可以尝试将 URL 放在标题标签中，以与我检索上面的 id 类似的方式检索它，从而消除大量混乱的 javascript 和 if/then 代码。
Using jQuery's .hover() you can also replace onmouseover and onmouseout out with a single jQuery function. This results in code that is shorter, cleaner and can be placed in an external .js file for easy use on any page you need it.
使用 jQuery 的 .hover() 您还可以用单个 jQuery 函数替换 onmouseover 和 onmouseout。这导致代码更短、更清晰，并且可以放置在外部 .js 文件中，以便在您需要的任何页面上轻松使用。
