Question

以下是我的代码

$("#Maindiv:not('.Buttonclass')").live("click",function(){
divclick();
});

function divclick(){
alert("div");
};
$(".Buttonclass").live("click",function(){
buttonclick();
});
function buttonclick(){
alert("button");
};

当我点击按钮时，“div”点击和按钮点击都被调用，我只想调用按钮而不是div点击功能。我在Not选择器中缺少什么？

Answer 1

尝试使用event.stopPropagation()方法。

Example here

$(".Buttonclass").live("click",function(event){
    event.stopPropagation();
buttonclick();
});

Answer 2

您必须使用event.stopPropagation：DEMO jsFiddle

$(".Buttonclass").live("click",function(e){
buttonclick();
    e.stopPropagation();
});

Answer 3

您需要使用event.stopPropagation()作为子按钮，以防止事件从父点击事件传播。

function buttonclick(event){
 alert("button");
 event.stopPropagation()
};

<强> working Fiddle

Answer 4

首先更喜欢on()而非live()，因为它已在jquery 1.9中弃用并删除

$(document).on("click", "#Maindiv", function (e) {
    divclick();
});
$(document).on("click", '#Maindiv .Buttonclass', function (e) {
    e.stopPropagation()
});

演示：Fiddle

Answer 5

此处不需要:not选择器。你的问题是事件冒泡相关。点击事件将冒泡到文档根目录，因此当您单击div内的按钮时，将首先单击该按钮，然后该事件将冒泡到其父元素（在本例中为div），依此类推。

你可以通过调用event.stopPropagation();来明确地防止这种行为。这将阻止事件在被调用时进一步冒泡。

查看已修复的http://jsfiddle.net/afFLB/5/

$(".Buttonclass").live("click",function(e){
    buttonclick();
    e.stopPropagation();
});

阅读this one以获取有关冒泡的更多信息。

Answer 6

$("#Maindiv").live("click",function(){
    divclick();
});

function divclick(){
    alert("div");
};
$(".Buttonclass").live("click",function(event){
    event.preventDefault();
    event.stopPropagation();
    buttonclick();
});
function buttonclick(){
    alert("button");
};

http://jsfiddle.net/afFLB/6/

这就是你想要的。停止传播。

在jquery选择器中使用not

6 个答案: