javascript - 如何使用:not() selector inclusive of parent:first-child element

Question

我有一个使 tr 元素成为超链接的 JQuery 函数，但是，当单击 td 之外的任何子元素时，它不应触发。另外我想排除第一个 td 元素，因为它包含一个复选框。

我试过了，但它不允许任何东西像复选框、子链接和子 javascript 一样工作:

$('table.table-striped tr[data-href] td').click(function (e) {
    e.stopPropagation();
    var $parent = $(this).parents('tr');
    window.location = $parent.data('href');
}).children().click(function(e) {
    return false;
});

然后我尝试了这个，但它似乎根本不起作用:

$(this).on('click', 'table.table-striped tr[data-href] td:not(:first-child):not(a.codelink):not(.actions):not(.dropdown-toggle):not(.dropdown):not(.caret):not(input)', function (e) {
    e.stopPropagation();
    var $parent = $(this).parents('tr');
    window.location = $parent.data('href');
});

这是表格行的示例:

<tr class="datarow" data-href="/stock/675144">
    <td><span class="largercheckbox"><input type="checkbox" class="selectrow" id="chk675144" data-id="675144"></span></td>
    <td><div class="stockindentifier">test</div></td>
    <td><a href="/link" class="codelink grey">1011.3</a></td>
    <td class="actions">
        <div class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#"><b class="caret"></b></a>
            <ul class="dropdown-menu pull-right"><li><a href="/stock/edit/675144"><i class="icon-edit"></i> Edit</a></li><li><a href="/stock/delete/675144" data-confirm="true" rel="nofollow"><i class="icon-trash"></i> Delete</a></li></ul>
        </div>
    </td>

Answer 1

使用 is() 确保点击的是 td 元素，防止操作在任何子元素上运行:

$('table.table-striped tr[data-href] td').click(function (e) {
    if ($(e.target).is('td'))
    {
        e.stopPropagation();
        var $parent = $(this).parents('tr');
        window.location = $parent.data('href');
    }
});