點擊事件不適用於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）。 您可以通過在關閉按鈕的click事件中調用event.stopPropagation來實現。

例如

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

Answer 2

這是一個顯示問題的jsfiddle。

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

當您單擊關閉時，您立即觸發了兩個點擊事件，因為關閉位於#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>