javascript - 选择除 main 中的特定元素之外的整个元素

Question

因此，我有一个主 div(模态容器)，它占用整页并在主 div 内部，还有另一个带有两个按钮的 div(模态内部)。主 DIV 设置为页面的全高/宽度，内部 DIV(模态内部)具有屏幕的 calc(100% - 40px) 宽度。

通过 Jquery，我在每个按钮单击事件上添加了两个函数，例如 jq-button-ok 和 jq-button-cancel。现在，当我尝试将点击事件添加到模态容器中时，但它同时调用了两个按钮的点击功能。解决方案是什么？

HTML:

<div class="modal-container" role="dialog">
    <div class="modal-inner" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button class="button jq-button-ok">OK</button>
                <button class="button jq-button-cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

CSS:

.modal-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 102;
    background: rgba(216,216,216,.25);
    transition: 0.3s opacity ease-in;
    opacity: 1;
}

.modal-inner {
    position: static;
    width: 500px;
    height: auto;
    max-width: calc(100% - 20px);
    transition: none;
    transform: none;
}

J查询:

$(document).ready(function () {

        $("body").on("click", ".jq-button-ok", function (e) {
            e.preventDefault();
            callfunstionone();
        });

        $("body").on("click", ".jq-button-cancel", function (e) {
            e.preventDefault();
            callfunstiontwo();
        });

        $("body").on("click", ".modal-container:not(.modal-inner)", function (e) {
            callfunstionfour();
        });

    });

Answer 1

而不是注册多个

$("body").on("click", ...

事件，只需要注册你真正需要的东西。你也可以使用

e.stopPropagation();

停止冒泡:

$(".jq-button-ok").on("click", function (e) {
    e.stopPropagation();
    callfunstionone();
});

$(".jq-button-cancel").on("click", function (e) {
    e.stopPropagation();
    callfunstiontwo();
});

$(".modal-container").on("click", function (e) {
    callfunstionfour();
});

---

JSFiddle Demo