Question

我有一张桌子，其中有以下事件：

$("#tp-active-list-table td").click(function () {
    var transactionNbr = parseInt($(this).parent("tr").children('td.td-transaction-nbr').html());
    DoSomething(transactionNbr);
});

它工作正常，基本上它会调用从DoSomething收集的Number的{{1}}。

但是我确实遇到了问题，因为在其中一个td中我有一个锚点，如果在该锚点上执行了点击，那么td将会运行，页面将会正确导航到另一个URL。

有没有检查点击是否在DoSomething上，以避免运行anchor功能？

Answer 1

使用event.stopPropagation()来阻止事件冒泡。

$('td a').click(function (e) { 
    e.stopPropagation()
});

其他选项是：e.target.tagName

$("#tp-active-list-table td").click(function (e) {
    if(e.target.tagName.toLowerCase() === 'a'){
            var transactionNbr = parseInt($(this).parent("tr").children('td.td-transaction-nbr').html());
            DoSomething(transactionNbr);
    }
});

Answer 2

作为第一个参数传递给处理函数的对象具有属性target，如果target.tagName == 'a'，则单击一个锚。

Answer 3

我认为Shaunak的回答非常有效。只是指出另一种方法，在点击事件中，您可以检查是否存在悬停的a标记。 http://jsfiddle.net/Zx7S5/

$("#tp-active-list-table td").click(function(event) {
    if($(this).find("a:hover").length <= 0) {

       /* ..... */

    }
});

OnClick on table row - 除了Anchor

3 个答案: