选择除 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;
}

jquery：

$(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

Answer 2

您应该使用e.stop​Propagation()，而不是使用e​.prevent​Default()：

Event 接口的stopPropagation() 方法防止当前事件在捕获和冒泡中进一步传播strong> 阶段。

$(document).ready(function () {

  $("body").on("click", ".jq-button-ok", function (e) {
      e.stopPropagation();
      //callfunstionone();
      alert('You have clicked button-ok')
  });

  $("body").on("click", ".jq-button-cancel", function (e) {
      e.stopPropagation();
      //callfunstiontwo();
      alert('You have clicked cancel')
  });

  $("body").on("click", ".modal-container:not(.modal-inner)", function (e) {
      //callfunstionfour();
      alert('You have clicked modal-container but not modal-inner')
  });

});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 3

click 事件将 dom 从按钮传播到 div，因此两个元素的事件处理程序都会被触发。您可以使用Event.stopImmediatePropagation 停止传播

$(document).ready(function () {

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

        $("body").on("click", ".jq-button-cancel", function (e) {
            e.preventDefault();
            console.log('callfunstiontwo()');
            e.stopImmediatePropagation();

        });

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

    });

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<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>

Answer 4

您需要排除要排除的按钮：

$(document).ready(function () {

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

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

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

    });