帶有$（document）.on（“ click”，function（e）的jQuery e.target

Question

我有一個函數，當用戶單擊document除模式之外的任何位置時，都會關閉.modal 。

$(document).on("click", function(e) {
  if (
    $(".apple-modal, .icon-modal").hasClass("active") &&
    !$(".modal, .modal *, .button").is(e.target)
  ) {
    $(".modal").removeClass("active");
  }
});

問題在於， fontawesome圖標會干擾打開模式的.button目標，而單擊區域僅是.button而不是嵌套在其中的任何內容（圖標）。

如何更改功能，以便即使單擊圖標也可以打開模式，然后在用戶單擊時丟失其.active類？

 $("[data-close]").click(function(e) { const dataClose = $(this).attr("data-close"); const elem = $('[data-id="' + dataClose + '"]').length ? $('[data-id="' + dataClose + '"]') : $(dataClose); if (elem.hasClass("active") && elem.is(":visible")) { elem.removeClass("active"); e.stopImmediatePropagation(); } }); $(".button").on("click", function() { const id = $(this).prop("id"); $(".modal").each(function() { $(this).toggleClass("active", $(this).data("id") == id); }); }); $(document).on("click", function(e) { if ( $(".apple-modal, .icon-modal").hasClass("active") && !$(".modal, .modal *, .button").is(e.target) ) { $(".modal").removeClass("active"); } }); 

 .buttons { display: flex; align-items: center; } .button { height: 30px; cursor: pointer; border: 2px solid; padding: 1rem; font-size: 28px; } #icon { color: silver; } .header { height: 15px; background: #eee; } .modal { position: fixed; top: 72px; right: 15px; z-index: 6; opacity: 0; visibility: hidden; transform: scale(0.5); transform-origin: top right; transition: 0.15s; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); } .modal:after { content: ""; width: 15px; height: 15px; background: inherit; position: absolute; background: #eee; top: -6px; right: 8px; opacity: 0; visibility: hidden; transform: rotate(45deg) scale(0.5); transition: 0.15s; } .modal.active { opacity: 1; visibility: visible; transform: scale(1); } .modal.active:after { opacity: 1; visibility: visible; transform: rotate(45deg) scale(1); } 

 <script src="https://pro.fontawesome.com/releases/v5.3.1/js/all.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="buttons"> <img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" /> <img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" /> <div class="button" id="icon" data-close="icon"> <i class="fas fa-bell"></i> </div> </div> <div class="modal" data-id="google"> <div class="header">Google</div> <ul> <li> First</li> <li> Second</li> <li> Third</li> </ul> </div> <div class="modal apple-modal" data-id="apple"> <div class="header">Apple</div> <ul> <li> First</li> <li> Second</li> <li> Third</li> </ul> </div> <div class="modal icon-modal" data-id="icon"> <div class="header">Icon</div> <ul> <li> First</li> <li> Second</li> <li> Third</li> </ul> </div> 

Answer 1

目前尚不清楚您到底要做什么。 Font Awesome不會中斷click事件。 我也會考慮使用jQuery UI。

考慮下面的代碼。

 $(function() { $("[data-close]").click(function(e) { const dataClose = $(this).attr("data-close"); const elem = $('[data-id="' + dataClose + '"]').length ? $('[data-id="' + dataClose + '"]') : $(dataClose); if (elem.hasClass("active") && elem.is(":visible")) { elem.removeClass("active"); e.stopImmediatePropagation(); } }); $("body").not(".active").click(function(e) { console.log("body click"); $(".active").removeClass("active"); }); $(".button").click(function(e) { var el = $(".modal[data-id='" + $(this).attr("id") + "']"); console.log($(this).attr("id") + " clicked, remove class 'active' from all. Add 'active' to ", el); $(".active").removeClass("active"); el.addClass("active"); console.log(el); e.stopPropagation(); }); }); 

 .buttons { display: flex; align-items: center; } .button { height: 30px; cursor: pointer; border: 2px solid; padding: 1rem; font-size: 28px; } #icon { color: silver; } .header { height: 15px; background: #eee; } .modal { position: fixed; top: 72px; right: 15px; z-index: 6; opacity: 0; visibility: hidden; transform: scale(0.5); transform-origin: top right; transition: 0.15s; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); } .modal:after { content: ""; width: 15px; height: 15px; background: inherit; position: absolute; background: #eee; top: -6px; right: 8px; opacity: 0; visibility: hidden; transform: rotate(45deg) scale(0.5); transition: 0.15s; } .modal.active { opacity: 1; visibility: visible; transform: scale(1); } .modal.active:after { opacity: 1; visibility: visible; transform: rotate(45deg) scale(1); } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="buttons"> <img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" /> <img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" /> <div class="button" id="icon" data-close="icon"> <i class="fas fa-bell"></i> </div> </div> <div class="modal" data-id="google"> <div class="header">Google</div> <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> </div> <div class="modal apple-modal" data-id="apple"> <div class="header">Apple</div> <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> </div> <div class="modal" data-id="icon"> <div class="header">Icon</div> <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> </div> 

您可以在此處看到我已經調整了click回調。 如果你沒有創建動態的內容，我會用.click()對.on()

在這種情況下，最好從所有active類中刪除active類，然后將其添加到特定的一個元素中。 .toggleClass()會執行此操作，但是根據腳本的狀態，您可能會得到各種各樣的結果或意外的結果。

使用正確的選擇器也有很大幫助。 由於我們的目標是具有data-id屬性的特定.modal ，因此可以使用$(".modal[data-id='icon']")作為選擇器來獲取該特定元素。

希望能有所幫助。