Rumah > Soal Jawab > teks badan
P粉2121146612023-08-24 12:19:34
Anda boleh mendengar document
上的 click 事件,然后确保 #menucontainer
不是被单击元素的祖先或目标通过使用 .closest()
.
Jika tidak, elemen yang diklik berada di luar #menucontainer
dan anda boleh menyembunyikannya dengan selamat.
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.closest('#menucontainer').length &&
$('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
});
Anda juga boleh membersihkan selepas pendengar acara jika anda bercadang untuk menutup menu dan ingin berhenti mendengar acara. Fungsi ini hanya akan membersihkan pendengar yang baru dibuat, meninggalkan mana-mana pendengar klik lain pada document
. Menggunakan sintaks ES2015:
export function hideOnClickOutside(selector) {
const outsideClickListener = (event) => {
const $target = $(event.target);
if (!$target.closest(selector).length && $(selector).is(':visible')) {
$(selector).hide();
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener);
}
document.addEventListener('click', outsideClickListener);
}
Untuk mereka yang tidak mahu menggunakan jQuery. Ini ialah kod vanillaJS (ECMAScript6) biasa di atas.
function hideOnClickOutside(element) {
const outsideClickListener = event => {
if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
element.style.display = 'none';
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener);
}
document.addEventListener('click', outsideClickListener);
}
const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
Nota:
Ini berdasarkan komen Alex, hanya menggunakan !element.contains(event.target)
dan bukannya bahagian jQuery.
Tetapi element.closest()
kini juga berfungsi dalam semua pelayar utama (versi W3C berbeza sedikit daripada versi jQuery).
Polyfill boleh didapati di sini: Element.closest()
Jika anda mahu pengguna boleh mengklik dan menyeret ke dalam elemen dan kemudian lepaskan tetikus di luar elemen tanpa menutup elemen:
... let lastMouseDownX = 0; let lastMouseDownY = 0; let lastMouseDownWasOutside = false; const mouseDownListener = (event: MouseEvent) => { lastMouseDownX = event.offsetX; lastMouseDownY = event.offsetY; lastMouseDownWasOutside = !$(event.target).closest(element).length; } document.addEventListener('mousedown', mouseDownListener);
dalam outsideClickListener
:
const outsideClickListener = event => { const deltaX = event.offsetX - lastMouseDownX; const deltaY = event.offsetY - lastMouseDownY; const distSq = (deltaX * deltaX) + (deltaY * deltaY); const isDrag = distSq > 3; const isDragException = isDrag && !lastMouseDownWasOutside; if (!element.contains(event.target) && isVisible(element) && !isDragException) { // or use: event.target.closest(selector) === null element.style.display = 'none'; removeClickListener(); document.removeEventListener('mousedown', mouseDownListener); // Or add this line to removeClickListener() } }
P粉3331862852023-08-24 10:52:59
Lampirkan acara klik pada badan dokumen tetingkap tertutup. Lampirkan acara klik berasingan pada bekas untuk menghentikan penyebaran ke badan dokumen.
$(window).click(function() { //Hide the menus if visible }); $('#menucontainer').click(function(event){ event.stopPropagation(); });