javascript - onclick onclick 位于其他内部的元素上，也被 onclick 使用

Question

这里有这样的问题，但我尝试了解决方案，但在我的情况下这不起作用。我有一个通过单击打开的表单，然后必须通过单击此表单内的 x 将其关闭。 This variant不适合，因为 cookie 在关闭表单后不会设置为打开。如果我打开将其设置为 close click这也不起作用，因为单击 x 会调用所有形式的单击事件。如果我喜欢 solution, I find in stackoverflow表格根本打不开。这是我的 js 代码:

$(document).ready(function () {
    if ($.cookie('techSupport') == null) {
        $.cookie('techSupport', 'off');
    } else if ($.cookie('techSupport') == 'on') {
        $.cookie('techSupport', 'off');
    };
}).on("click", "div#techSupport", function (event) {
    if ($.cookie("techSupport") == 'off') {
        $.cookie("techSupport", "on");
        var res = "<nobr><div>Technical support<a href='#' id='closeChat'>x</a></div></nobr>\n" +
            "<div id='chatBox'>What's your probloem?</div>\n" +
            "<textarea id='messageBox'></textarea>\n" +
            "<button id='sendToSupport'>Send</button>";
        $(this).css("width", "200px");
        $(this).css("height", "400px");
        $(this).html(res);
    }
}).on("click", "div#techSupport,a#closeChat", function () {
    var res = "<div id='techSupport'>techsupport</div>";
    $("div#techSupport").html(res);
    $("div#techSupport").css("width", "100px");
    $("div#techSupport").css("height", "10px");
    console.log($("div#techSupport").html());
    $.cookie("techSupport","off");
    event.stopPropagation();
    //window.location.reload();
});

HTML:

<div id="techSupport">techsupport</div>

那么我怎样才能点击交叉忽略主窗体呢？

Answer 1

这里你有两个选择，在 a#closeChat 的 onclick 中停止事件的传播(注意我还添加了 e 参数在你的处理程序中):

.on("click", "a#closeChat", function (e) {
    var res = "<div id='techSupport'>techsupport</div>";
    $("div#techSupport").html(res);
    $("div#techSupport").css("width", "100px");
    $("div#techSupport").css("height", "10px");
    console.log($("div#techSupport").html());
    $.cookie("techSupport","off");
    e.stopPropagation();
    //window.location.reload();
});

http://jsfiddle.net/d6fpfzsu/10/

或

检查 div#techSupport 处理程序上 event 的 target 属性:

if ($.cookie("techSupport") == 'off' && event.target.id != 'closeChat') {
    $.cookie("techSupport", "on");
    var res = "<nobr><div>Technical support<a href='#' id='closeChat'>x</a></div></nobr>\n" +
        "<div id='chatBox'>What's your probloem?</div>\n" +
        "<textarea id='messageBox'></textarea>\n" +
        "<button id='sendToSupport'>Send</button>";
    $(this).css("width", "200px");
    $(this).css("height", "400px");
    $(this).html(res);
}

http://jsfiddle.net/d6fpfzsu/11/

最佳解决方案将取决于每个用例。