javascript - 单击事件不适用于 jQuery

Question

我正在使用 jQuery 为我的下拉模式之一附加点击处理程序。我使用相同的语法打开模态，效果很好。但是当我想关闭模式时，点击似乎不起作用。

// When the user clicks the button, open the modal
$("#requestQuoteNavMap").click(function() {
  $("#myModal").show();
});

// When the user clicks close, close the modal
$("#close").click(function() {
  $("#myModal").hide();
});

.modal {
  background: white;
  border: 1px solid black;
}

.close {
  background: red;
  color: white;
  padding: 5px;
  font: bold 20px Verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="requestQuoteNavMap">
  <!-- The Modal -->
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header" id="modal-header">
        <span class="close" id="close">×</span>
        <h3 class="modalHeaderTxt">Header</h3>
      </div>
      <div class="modal-body">
        <!--content here-->
      </div>
      <div class="modal-footer" id="modal-footer">Post</div>
    </div>
  </div>
</div>

Answer 1

由于关闭按钮在 div requestQuoteNavMap 中，因此任何点击关闭按钮也将被识别为点击 div。这将触发两个点击事件，从而首先隐藏然后显示模式。

为防止这种情况发生，您需要在点击事件时阻止点击事件冒泡或传播到关闭按钮的父级(div)。您可以通过调用 event.stopPropagation 来完成此操作来自关闭按钮的点击事件。

例如

$("#close").click(function(event) {
  $("#myModal").hide();
  event.stopPropagation();
});