javascript - 如何使用 jQuery 不只选择表中的特定元素？

Question

我有这个 fiddle :http://jsfiddle.net/v9s5ezpb/1/

HTML

<table>
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td><a href="#">test3</a></td>
        <td>test4</td>
        <td>test5</td>
        <td class="no-alert">test6</td>
    </tr>
</table>

CSS

table {
    border: 1px solid #000;
}

table td {
    border: 1px solid #000;
    padding: 10px;
}

JS

$(document).on('click', 'table td:not(.no-alert, a)', function()
{
    alert(1);
});

我希望我的代码在每次单击任何表 TD 元素时都执行一个警告窗口，除了那些具有特定类或具有 anchor 标记的元素。

这怎么可能？

Answer 1

A <td>不能是 <a>但它可以有后代 <a>你可以使用 :has()选择器。

$(document).on('click', 'table td:not(.no-alert, :has(a))', function()...

编辑:更新允许点击<td>与 <a>但不是当<a>是目标

$(document).on('click', 'table td:not(.no-alert)', function(event){
    if(!$(event.target).closest('a').length ){
       // is not click on <a>` tag
    }    
});

二手 closest()检查目标以防<a>有 child 喜欢<i>或 <img>这可能是实际目标

DEMO