Question

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

＆＃13;

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

＆＃13;

.modal {
  background: white;
  border: 1px solid black;
}

.close {
  background: red;
  color: white;
  padding: 5px;
  font: bold 20px Verdana;
}

＆＃13;

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

＆＃13;

Answer 1

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

要防止出现这种情况，您需要在点击时将冒泡或传播的点击事件停止到关闭按钮的父级（div）。您可以通过在关闭按钮的点击事件中调用event.stopPropagation来执行此操作。

e.g。

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

Answer 2

这是一个显示内容的jsfiddle。

https://jsfiddle.net/e4tw7d5k/13/

当你点击关闭时，你现在正在触发两个点击事件，因为close在#requestQuoteNavMap中。 javascript中的事件会触发您首先单击的元素，然后一次“冒泡”到包含该元素的每个元素。使用event.stopPropagation()将阻止click事件传播（冒泡）到任何其他元素。

// When the user clicks the button, open the modal
$("#requestQuoteNavMap").click(function(){ 
  $("#myModal").show();
});

// When the user clicks anywhere outside of the modal, close it
$("#close").click(function(e){ 
	e.stopPropagation();
  $("#myModal").hide(); 
});

.modal {
  display: block;
  background: #eee;
}

<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">
                <a href="#" class="close" id="close">×</a>
                <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>

点击事件不能使用jQuery

2 个答案: