Question

我在表行中使用onClick，如下所示：

<tr onmouseover="this.style.cursor='pointer'" onclick="http://www.whatever.com/index.php?var={$foo1}">

我还需要在此表格行的某些区域中添加链接，即

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

问题是，无法单击“内部链接”（specialLink.php），因为行链接优先。我有什么选择吗？

由于

Answer 1

您可以使用stopImmediatePropagation（）来绕过连续/传入的事件。

简短的例子：

<tr onclick="alert('tr event')">
    <td>tr event</td>
    <td onclick="alert('td');event.stopImmediatePropagation();">NO tr event</td>
</tr>

在jsfiddle上测试： http://jsfiddle.net/g8Anh/6/

Answer 2

我会这样做：

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

Answer 3

你也可以这样做（这利用jQuery）：

$("td")
    .click(function(e){
        var tag = e.target.nodeName;
        if( tag === 'A' ){
            // link was clicked
        } else {
            // normal td was clicked
        }
    });

Example

这取代了甚至使用内联Javascript的需要。

Answer 4

我实际上会在整个表上放一个事件，而不是每一行。特别是如果你有数百个。所以......

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

此方法不会污染全局范围，并使用单个事件，该事件总是比每行一个更有效。

Answer 5

尝试在表格单元格上放置一个id并使用jQuery来处理click事件。例如......

<tr id="row1">
    <td id="cell1" class="table_cell">etc</td>
    <td id="cell2" class="table_cell">etc</td>
</tr>

您的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...
});

你甚至可以尝试将URL放在标题标签中，以与我检索上面的id类似的方式检索它，从而消除了大量凌乱的javascript和if / then代码。

使用jQuery的.hover（），您还可以使用单个jQuery函数替换onmouseover和onmouseout。这样可以使代码更短，更清晰，并且可以放在外部.js文件中，以便在您需要的任何页面上使用。

Answer 6

在链接周围的td元素上添加以下attr：

<td onclick="event.cancelBubble=true;">your link with event</td>

这就是我们在工作中为IE解决的问题

在表格行中使用onClick，其中也包含链接

6 个答案: