当目标与选择器不匹配时触发 jQuery 事件答案

【问题标题】：Fire jQuery event when target does not match selector当目标与选择器不匹配时触发 jQuery 事件
【发布时间】：2012-02-23 20:50:26
【问题描述】：

我有以下标记：

<table>
    <tbody>
        <tr>
            <td>
                <a href="javascript:void(0)" class=expand>click me</a>
                <span>some other content</span>
            </td>
            <td>
                click me too
            </td>
        </tr>
    </tbody>
</table>

我正在将行的点击处理程序附加到表中：

$('table').on('click', 'tr :not(".expand")', function(evt) {
    if (! $(evt.target).is(selector)) {
        console.log('event is firing even though target doesnt match the selector!!!');
    } else {
        console.log('event is firing as expected');
    }
});

var selector = $('table').data('events').click[0].selector;

JSFiddle

我希望事件仅在源自与tr :not(".expand") 选择器（条件的else 部分）匹配的元素时触发，但无论如何都会触发事件。

如何将回调绑定到 <table> 元素处的事件，使其仅在不是被点击的 .expand 元素时触发？

澄清：如果用户点击<span>some other content</span>，事件处理程序仍应执行

【问题讨论】：

我很困惑。因此，您希望 tr 中的所有内容都可点击，但您希望展开元素在被点击后不会冒泡？
没错。 expand 元素在其他地方已经有一个点击处理程序，所以我只想处理没有在 expand 元素上的点击。
检查我的答案以停止传播展开点击。应该处理你需要的东西。

标签： jquery events

【解决方案1】：

我相信你想要这个：

$('table').on('click', 'tr td:not(:has(".expand"))', function(evt) {
    console.log("Event only fires when clicking something that doesn't contain an expando");
});

var selector = $('table').data('events').click[0].selector;

jsFiddle

【讨论】：

当用户点击 'td' 中不是 'a' 标记的任何位置时，这不会触发。如果用户单击“td”标签而不是“a”标签，我仍然希望调用事件处理程序。我会澄清这个问题。

【解决方案2】：

尝试使用.is(...) 和event.target：

$('table').on('click', 'tr :not(".expand")', function(evt) {
    if ($(evt.target).is('tr :not(".expand")')) {
        alert('clicked it!');
    }
    else {
        alert('not')
    }
});

小提琴：http://jsfiddle.net/maniator/h9yh7/

【讨论】：

这正是我在问题中所做的。我知道我可以这样做，但似乎我在重复自己 b/c 我在附加事件时指定了相同的选择器。可以不重复自己吗？

【解决方案3】：

如果要处理.expand，而不触发行点击，

$('table').on('click', '.expand', function(evt) {
    evt.stopPropagation(); 
    console.log('expand clicked!');
});

jQuery.stopPropagation()

【讨论】：

我想处理与此相反的情况，当用户点击 .expand 以外的其他内容时
你的代码已经处理了。在我看来，您在点击展开以停止激活行点击时遇到了问题。