Question

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

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

HTML：

[(slice(996, 999, None), array([nan, nan, nan])),
 (999, -47.3),
 (1000, -72.5),
 (1100, -97.7),
 (slice(1200, 1202, None), array([nan, nan])),
 (1205, -97.8),
 (slice(1300, 1301, None), array([nan])),
 (slice(1302, 1303, None), array([nan])),
 (1305, -97.9),
 (slice(1400, 1401, None), array([nan])),
 (1405, -97.1),
 (slice(1408, 1409, None), array([nan]))]

CSS：

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

jQuery：

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

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.stopPropagation()而不是使用gem install iconv -- --with-iconv-include="<path>" --with-iconv-lib="<path>"：

事件界面的e.preventDefault()方法可防止当前事件在捕获和 冒泡中进一步传播阶段。

stopPropagation()

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

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();
        });

    });

选择除main内部特定元素之外的整个元素

4 个答案: