Question

我不确定为什么事件StopPropagation技术不能使用这个简单的onClick示例 - 事件似乎在冒泡DOM树，并且每次我再次点击时也会以指数方式迭代。

我认为这是因为我使用javascript函数生成html，并且我非常渴望听到您认为这不能按预期工作的原因。

编辑：我在http://jsfiddle.net/Guill84/GsLtN/22/创建了一个jsFiddle。问题变得非常清楚。如果我点击＆＃39; Text1＆＃39;第一次，警报弹出窗口只出现一次。如果我再次点击它，它会出现两次。如果我再次点击它，它会出现三次，依此类推。如何修改脚本以使其仅运行一次？这让我很沮丧。

HTML

<body>
    <div id='container'>
        <div id='1'>Text1</div>
        <div id='2'>Text2</div>
    </div>
</body>

的Javascript

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);


$('body').on('click', '#1', function (event) {
    event.stopPropagation();
    var declim = 10 - 1;
    notice_it(declim);
});

$('body').on('click', '#2', function (event) {
    event.stopPropagation();
    var declim = 10 + 1;
    notice_it(declim);
});


$('body').on('click', 'body', function (e) {
    e.stopPropagation();
});

});

Answer 1

调用return false应该适用于您的场景。

Answer 2

我已经添加了评论，但之后我认为这会以更好的方式解释。

问题

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);

    $('body').on('click', '#1', function (event) {
        event.stopPropagation();
        var declim = 10 - 1;
        notice_it(declim); // Issue
    });
});

此处 notice_it（）用于初始化事件，并在事件处理程序中再次调用它。以下是显示不同注册事件的更新JSFiddle - Issues。

解决方案

一个简单的解决方案是将用于通知的代码迁移到单独的函数，如下面的JSFiddle - Solution1所示。

更好的实施方式如下：JSFiddle - Solution2。它有点Declarative Programming，让其他人很容易理解。

Answer 3

$(function notice_it(declim) {
    if ($.isNumeric(declim)) { 
        //stuff
    } else {
        declim = 10;
    }
    $("#container").html("<div id='1'>Text1</div><div id='2'>Text2</div>");
    alert(declim);


$('body').on('click', '#1', function (event) {
    return false;
    var declim = 10 - 1;
    notice_it(declim);
});

$('body').on('click', '#2', function (event) {
    return false;
    var declim = 10 + 1;
    notice_it(declim);
});


$('body').on('click', 'body', function (e) {
    e.stopPropagation();
});

});

点击

尝试返回false

使用jQuery

3 个答案:

问题

解决方案