在包含链接的表行中使用onClick

using onClick in a table row that also has links in it

本文关键字：onClick 包含 链接      更新时间：2023-09-26

我在表行中使用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>

问题是，"内部链接"(specialallink .php)不能被点击，因为行链接优先。我还有别的选择吗?

谢谢

您可以使用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/

我会这么做的:

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

您还可以这样做(这使用jQuery):

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

的例子。

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

我实际上会在整个表上放置一个事件，而不是每一行。特别是当你有几百的时候。所以…

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

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

尝试在表格单元格上添加一个id，并使用jQuery来处理单击事件。例如…

<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文件中，以便在任何需要的页面上轻松使用。

在链接周围的td元素上添加以下属性:

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

这是我们在我的工作中解决IE的方法

相关文章：