Question

我想分开点击事件。

必须提醒body标记内的所有点击＆＃34;在表格外＃34;

除了postit-table类中的点击事件。

这是我的代码：

HTML

<table class="postit-table">
    <tbody>
    <tr class="postit-header">
        <td>header</td>
    </tr>
    <tr>
        <td><textarea class="postit-content"></textarea></td>
    </tr>
    </tbody>
</table>

CSS

.postit-table{
    width: 200px;
    height: 200px;
    background-color: yellow;
}

的JavaScript（jquery的）：

$("body").bind('click',':not(".postit-table,.postit-table tbody, .postit-table tr, .postit-table tbody tr td")', function (e) {
    alert("clicked outside table!");
});

$(".postit-table").click(function(){
    alert("clicked inside table!");
});

的jsfiddle：

http://jsfiddle.net/c5fomgp1/

不幸的是，如果您运行小提琴应用程序，它仍会调用外部表单击事件：（

有人可以帮忙吗？

Answer 1

在stopPropagation()点击事件中使用postit-table：这样做的点击事件不会传播到body元素

示例 - http://jsfiddle.net/e5jph1Lt/

$("body").on('click', function() {
    alert("clicked outside table!");
});

$(".postit-table").on('click', function(evt) {
    evt.stopPropagation();
    alert("clicked inside table!");
});

作为旁注，如果您使用最近的jQuery版本，请使用on()而不是bind()

Answer 2

解决了

$("body").bind('click',':not(".postit-table,.postit-table tbody, .postit-table tr, .postit-table tbody tr td")', function (e) {
    alert("clicked outside table!");
});

$(".postit-table").click(function(e){
    e.stopPropagation();
    alert("clicked inside table!");
});

另外尝试这个有其他解决方案。作弊

Answer 3

使用

e.stopPropagation();

代码

http://jsfiddle.net/9e5128g1/

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

参考文献

http://api.jquery.com/event.stoppropagation/

Answer 4

看起来过于复杂。正如其他人已经回答的那样，您可以使用event.stopPropagation来简化代码。类似的东西：

$(document).on('click', clickedoutside);
$('body').on('click', '.postit-table', clicked);

function clicked(e){
    e.stopPropagation();
    alert('clicked inside table!');
};

function clickedoutside(e){
    alert('clicked <b>outside</b> table!');
};

这是您重写的jsFiddle

javascript点击事件分离

4 个答案: