Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk mengesan klik elemen luar?

<p>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. </p> <p>Adakah ini mungkin menggunakan jQuery? </p> <pre class="brush:php;toolbar:false;">$("#menuscontainer").clickOutsideThisElement(function() { // Sembunyikan menu });</pre> <p><br /></p>
P粉113938880P粉113938880446 hari yang lalu465

membalas semua(2)saya akan balas

  • P粉212114661

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

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

    balas
    0
  • P粉333186285

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

    balas
    0
  • Batalbalas