Bagaimana untuk mengesan klik elemen luar?

Question

Saya mempunyai beberapa menu HTML yang saya paparkan sepenuhnya apabila pengguna mengklik pada pengepala menu ini. Saya mahu menyembunyikan elemen ini apabila pengguna mengklik di luar kawasan menu.

Adakah ini mungkin menggunakan jQuery?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Sembunyikan menu
});

Answer 1

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

Sunting – 23 Jun 2017

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

Sunting – 3 November 2018

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

Edit – 2020-05-21

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

Answer 2

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