jQuery :not选择器对按钮失效：点击TD触发弹窗但按钮不触发

你的问题出在选择器的逻辑上：tr:not(button)是用来筛选不是button元素的tr，但button本来就不是tr，所以这个选择器完全起不到过滤作用。当你点击按钮时，事件会向上冒泡到父级的tr，所以还是会触发alert。

这里有两种靠谱的解决思路：

思路一：在事件处理中判断点击目标 #

绑定事件到tr，但在函数里检查点击的元素是不是按钮（或者按钮的后代），如果是就跳过执行逻辑：

$('#example tbody').on('click', 'tr', function (e) {
    // 检查点击目标是否是按钮，或者是否在按钮内部
    if ($(e.target).is('button') || $(e.target).closest('button').length > 0) {
        return; // 终止函数，不弹出提示
    }
    alert('Hello world!');
});

思路二：阻止按钮的事件冒泡 #

给按钮单独绑定点击事件，阻止它的事件向上冒泡到tr/td，这样点击按钮时就不会触发父元素的点击事件：

// 先阻止按钮的事件冒泡
$('#example tbody').on('click', 'button', function(e) {
    e.stopPropagation();
});

// 再给tr绑定点击事件
$('#example tbody').on('click', 'tr', function () {
    alert('Hello world!');
});

两种方法都能达到你的需求，第一种更灵活（比如按钮内部有图标也能处理），第二种更直接，你可以根据自己的场景选择。

内容的提问来源于stack exchange，提问作者Shah Rushabh