Bir ├Â─čenin d─▒┼č─▒ndaki bir t─▒klamay─▒ nas─▒l tespit ederim?


Al─▒nan cevaba git


Bir kullan─▒c─▒ bu men├╝lerin kafas─▒n─▒ t─▒klad─▒─č─▒nda tamamen g├Âsterdi─čim baz─▒ HTML men├╝lerim var. Kullan─▒c─▒, men├╝ler alan─▒n─▒n d─▒┼č─▒n─▒ t─▒klatt─▒─č─▒nda bu ├Â─čeleri gizlemek istiyorum.

JQuery ile b├Âyle bir ┼čey m├╝mk├╝n m├╝?

 $("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});
 

2343









Cevap say─▒s─▒n─▒ say: 30






NOT: Kullan─▒m stopEventPropagation() , DOMÔÇÖdaki normal olay ak─▒┼č─▒n─▒ bozdu─ču i├žin ka├ž─▒n─▒lmas─▒ gereken bir ┼čeydir. Daha fazla bilgi i├žin bu makaleye bak─▒n . Bunun yerine bu y├Ântemi kullanmay─▒ d├╝┼č├╝n├╝n

Pencereyi kapatan belge g├Âvdesine bir click olay─▒ ekleyin. Belgenin g├Âvdesine yay─▒lmas─▒n─▒ durduran kaba ayr─▒ bir t─▒klama olay─▒ ekleyin.

 $(window).click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});
 

1753







Bir click olay─▒n─▒ dinleyebilir document ve ard─▒ndan #menucontainer kullanarak ata veya hedefin ├Â─česinin hedefi olmad─▒─č─▒ndan emin olabilirsiniz .closest() .

De─čilse, t─▒klanan ├Â─če d─▒┼č─▒n d─▒┼č─▒ndad─▒r #menucontainer ve g├╝venle gizleyebilirsiniz.

 $(document).click(function(event) { 
  $target = $(event.target);
  if(!$target.closest('#menucontainer').length && 
  $('#menucontainer').is(":visible")) {
    $('#menucontainer').hide();
  }        
});
 

D├╝zenleme - 2017-06-23

Ayr─▒ca, men├╝y├╝ kapatmay─▒ planl─▒yorsan─▒z ve olaylar─▒ dinlemeyi durdurmak istiyorsan─▒z olay dinleyicisinden sonra temizleyebilirsiniz. Bu i┼člev, yaln─▒zca yeni olu┼čturulan dinleyicileri temizler ve di─čer t─▒klama dinleyicilerini korur document . ES2015 s├Âzdizimi ile:

 export function hideOnClickOutside(selector) {
  const outsideClickListener = (event) => {
    $target = $(event.target);
    if (!$target.closest(selector).length && $(selector).is(':visible')) {
        $(selector).hide();
        removeClickListener();
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}
 

D├╝zenleme - 2018-03-11

JQuery kullanmak istemeyenler i├žin. ─░┼čte d├╝z vanilyaJS'de (ECMAScript6) yukar─▒daki kod.

 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 
 

Not: Bu sadece !element.contains(event.target) jQuery par├žas─▒ yerine kullanmak i├žin Alex yorum dayanmaktad─▒r .

Ancak element.closest() art─▒k t├╝m b├╝y├╝k taray─▒c─▒larda da kullan─▒labilir (W3C s├╝r├╝m├╝ jQuery'den biraz farkl─▒d─▒r). Polyfills burada bulunabilir: Element.closest ()


1316







Bir eleman─▒n d─▒┼č─▒ndaki bir t─▒klamay─▒ nas─▒l tespit edebilirim?

Bu sorunun bu kadar pop├╝ler olmas─▒n─▒n ve ├žok fazla cevab─▒ olmas─▒n─▒n nedeni, aldat─▒c─▒ bir ┼čekilde karma┼č─▒k olmas─▒d─▒r. Neredeyse sekiz y─▒l ve onlarca cevaptan sonra, eri┼čilebilirli─če ne kadar az ├Âzen g├Âsterildi─čini g├Âr├╝nce ger├žekten ┼ča┼č─▒rd─▒m.

Kullan─▒c─▒, men├╝ler alan─▒n─▒n d─▒┼č─▒n─▒ t─▒klatt─▒─č─▒nda bu ├Â─čeleri gizlemek istiyorum.

Bu asil bir sebep ve as─▒l mesele. Sorunun ba┼čl─▒─č─▒ - cevaplar─▒n ├žo─ču ele almaya ├žal─▒┼č─▒yor gibi g├Âr├╝n├╝yor - talihsiz bir k─▒rm─▒z─▒ ringa bal─▒─č─▒ var.

─░pucu: "t─▒k" kelimesi !

Asl─▒nda t─▒klama i┼čleyicileri ba─člamak istemiyorsunuz.

─░leti┼čim kutusunu kapatmak i├žin t─▒klama i┼čleyicileri ba─člay─▒c─▒ysan─▒z, zaten ba┼čar─▒s─▒z oldunuz. Ba┼čar─▒s─▒z olman─▒z─▒n nedeni, herkesin click olaylar─▒ tetiklememesidir . Fare kullanmayan kullan─▒c─▒lar, d├╝─čmesine basarak ileti┼čim kutunuzdan ka├žabilir (ve a├ž─▒l─▒r men├╝n├╝z tart─▒┼čmal─▒ bir ileti┼čim t├╝r├╝d├╝r) Tabve ard─▒ndan bir click olay─▒ tetiklemeden ileti┼čim kutusunun arkas─▒ndaki i├žeri─či okuyamazlar .

├ľyleyse soruyu tekrar yazal─▒m.

Bir kullan─▒c─▒ bitti─činde bir ileti┼čim kutusunu nas─▒l kapat─▒r?

Ama├ž bu. Ne yaz─▒k ki, ┼čimdi userisfinishedwiththedialog olay─▒ ba─člama ihtiyac─▒m─▒z var ve bu ba─članma o kadar kolay de─čil.

Peki bir kullan─▒c─▒n─▒n bir ileti┼čim kutusunu kullanarak bitirdi─čini nas─▒l tespit edebiliriz?

focusout Etkinlik

Odak─▒n ileti┼čim kutusundan ├ž─▒k─▒p ├ž─▒kmad─▒─č─▒n─▒ belirlemek iyi bir ba┼člang─▒├žt─▒r.

─░pucu: blur olaya dikkat edin , blur e─čer olay k├Âp├╝rme a┼čamas─▒na ba─čl─▒ysa yay─▒lmaz!

jQuery's focusout sadece iyi yapacak. JQuery kullanam─▒yorsan─▒z blur , yakalama a┼čamas─▒nda kullanabilirsiniz:

 element.addEventListener('blur', ..., true);
//                       use capture: ^^^^
 

Ayr─▒ca, bir├žok ileti┼čim kutusu i├žin kab─▒n odaklanmas─▒na izin vermeniz gerekir. tabindex="-1" ─░leti┼čim kutusunun ak─▒┼č─▒n─▒ aksatmadan kesmeden dinamik olarak oda─č─▒ almas─▒na izin vermek i├žin ekleyin .

 $('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on('focusout', function () {
  $(this).removeClass('active');
}); 
 div {
  display: none;
}
.active {
  display: block;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div> 


Bir dakikadan daha uzun bir s├╝re bu demo ile oynarsan─▒z, sorunlar─▒ h─▒zla g├Ârmeye ba┼člamal─▒s─▒n─▒z.

Birincisi, ileti┼čim kutusundaki ba─člant─▒n─▒n t─▒klanabilir olmamas─▒d─▒r. ├ťzerine veya sekmesine t─▒klamay─▒ denemek, etkile┼čim ger├žekle┼čmeden ├Ânce ileti┼čimin kapanmas─▒na yol a├žacakt─▒r. Bunun nedeni, i├ž ├Â─čeye odaklanman─▒n, focusout bir focusin olay─▒ tekrar tetiklemeden ├Ânce bir olay─▒ tetiklemesidir .

D├╝zeltme, olay d├Âng├╝s├╝ndeki durum de─či┼čikli─čini s─▒raya koymakt─▒r. Bu, kullanarak setImmediate(...) veya setTimeout(..., 0) desteklemeyen taray─▒c─▒lar i├žin yap─▒labilir setImmediate . Kuyru─ča al─▒nd─▒ktan sonra, a┼ča─č─▒dakiler taraf─▒ndan iptal edilebilir focusin :

 $('.submenu').on({
  focusout: function (e) {
    $(this).data('submenuTimer', setTimeout(function () {
      $(this).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function (e) {
    clearTimeout($(this).data('submenuTimer'));
  }
});
 

 $('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  }
}); 
 div {
  display: none;
}
.active {
  display: block;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div> 

─░kinci sorun, ba─člant─▒ya tekrar bas─▒ld─▒─č─▒nda ileti┼čim kutusunun kapanmamas─▒d─▒r. Bunun nedeni, ileti┼čimin oda─č─▒n─▒ kaybetmesi, kapanma davran─▒┼č─▒n─▒ tetiklemesi ve ard─▒ndan ba─člant─▒ t─▒klatmas─▒n─▒n yeniden a├ž─▒lacak ileti┼čim kutusunu tetiklemesidir.

├ľnceki say─▒ya benzer ┼čekilde odak durumunun y├Ânetilmesi gerekiyor. Durum de─či┼čikli─činin zaten kuyru─ča al─▒nd─▒─č─▒ g├Âz ├Ân├╝ne al─▒nd─▒─č─▒nda, bu yaln─▒zca ileti┼čim tetikleyicileri ├╝zerindeki odak olaylar─▒n─▒ ele alma meselesidir:

Bu tan─▒d─▒k gelmeli
 $('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});
 

 $('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  }
});

$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
}); 
 div {
  display: none;
}
.active {
  display: block;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div> 


Esc anahtar

Odak durumlar─▒n─▒ ele ald─▒─č─▒n─▒z─▒ d├╝┼č├╝n├╝yorsan─▒z, kullan─▒c─▒ deneyimini kolayla┼čt─▒rmak i├žin daha fazlas─▒n─▒ yapabilirsiniz.

Bu genellikle "olmas─▒ g├╝zel" bir ├Âzelliktir, ancak Escanahtar─▒n kapataca─č─▒ herhangi bir t├╝r modalya veya a├ž─▒l─▒r pencereye sahip oldu─čunuzda yayg─▒nd─▒r .

 keydown: function (e) {
  if (e.which === 27) {
    $(this).removeClass('active');
    e.preventDefault();
  }
}
 

 $('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  },
  keydown: function (e) {
    if (e.which === 27) {
      $(this).removeClass('active');
      e.preventDefault();
    }
  }
});

$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
}); 
 div {
  display: none;
}
.active {
  display: block;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div> 


─░leti┼čim kutusundaki odaklanabilir ├Â─čelerin oldu─čunu biliyorsan─▒z, ileti┼čim kutusunu do─črudan odaklaman─▒z gerekmez. Bir men├╝ olu┼čturuyorsan─▒z, bunun yerine ilk men├╝ ├Â─česine odaklanabilirsiniz.

 click: function (e) {
  $(this.hash)
    .toggleClass('submenu--active')
    .find('a:first')
    .focus();
  e.preventDefault();
}
 

 $('.menu__link').on({
  click: function (e) {
    $(this.hash)
      .toggleClass('submenu--active')
      .find('a:first')
      .focus();
    e.preventDefault();
  },
  focusout: function () {
    $(this.hash).data('submenuTimer', setTimeout(function () {
      $(this.hash).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('submenuTimer'));  
  }
});

$('.submenu').on({
  focusout: function () {
    $(this).data('submenuTimer', setTimeout(function () {
      $(this).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('submenuTimer'));
  },
  keydown: function (e) {
    if (e.which === 27) {
      $(this).removeClass('submenu--active');
      e.preventDefault();
    }
  }
}); 
 .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu:after {
  clear: both;
  content: '';
  display: table;
}
.menu__item {
  float: left;
  position: relative;
}

.menu__link {
  background-color: lightblue;
  color: black;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}
.menu__link:hover,
.menu__link:focus {
  background-color: black;
  color: lightblue;
}

.submenu {
  border: 1px solid black;
  display: none;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
}
.submenu--active {
  display: block;
}

.submenu__item {
  width: 150px;
}

.submenu__link {
  background-color: lightblue;
  color: black;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}

.submenu__link:hover,
.submenu__link:focus {
  background-color: black;
  color: lightblue;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="#menu-1">Menu 1</a>
    <ul class="submenu" id="menu-1" tabindex="-1">
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
    </ul>
  </li>
  <li class="menu__item">
    <a  class="menu__link" href="#menu-2">Menu 2</a>
    <ul class="submenu" id="menu-2" tabindex="-1">
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
    </ul>
  </li>
</ul>
lorem ipsum <a href="http://example.com/">dolor</a> sit amet. 


WAI-ARIA Rolleri ve Di─čer Eri┼čilebilirlik Deste─či

Bu cevap umar─▒m bu ├Âzellik i├žin eri┼čilebilir klavye ve fare deste─či temellerini kapsamaktad─▒r, ama zaten olduk├ža b├╝y├╝k├že oldu─ču gibi ben herhangi bir tart─▒┼čma ├Ânlemek i├žin gidiyorum WEG-ARIA rolleri ve nitelikler ancak, son derece uygulay─▒c─▒lar detaylar i├žin ├Âzelliklerine bak─▒n ├Âneririz hangi rolleri kullanmalar─▒ gerekti─či ve di─čer uygun nitelikler ├╝zerine.


270







Buradaki di─čer ├ž├Âz├╝mler benim i├žin i┼če yaramad─▒ bu y├╝zden kullanmak zorunda kald─▒m:

 if(!$(event.target).is('#foo'))
{
    // hide menu
}
 

139







Men├╝y├╝ a├žt─▒─č─▒mda click olay─▒n─▒ g├Âvdeye ili┼čtirmem d─▒┼č─▒nda, Eran'─▒n ├Ârne─čine benzer ┼čekilde ├žal─▒┼čan bir uygulamam var.

 $('#menucontainer').click(function(event) {
  $('html').one('click',function() {
    // Hide the menus
  });

  event.stopPropagation();
});
 

JQuery'nin i┼člevi hakk─▒nda daha fazla bilgi one()


126







Ara┼čt─▒rmadan sonra ├╝├ž ├žal─▒┼čma ├ž├Âz├╝m├╝ buldum (referans i├žin sayfa ba─člant─▒lar─▒n─▒ unuttum)

─░lk ├ž├Âz├╝m

 <script>
    //The good thing about this solution is it doesn't stop event propagation.

    var clickFlag = 0;
    $('body').on('click', function () {
        if(clickFlag == 0) {
            console.log('hide element here');
            /* Hide element here */
        }
        else {
            clickFlag=0;
        }
    });
    $('body').on('click','#testDiv', function (event) {
        clickFlag = 1;
        console.log('showed the element');
        /* Show the element */
    });
</script>
 

─░kinci ├ž├Âz├╝m

 <script>
    $('body').on('click', function(e) {
        if($(e.target).closest('#testDiv').length == 0) {
           /* Hide dropdown here */
        }
    });
</script>
 

├ť├ž├╝nc├╝ ├ž├Âz├╝m

 <script>
    var specifiedElement = document.getElementById('testDiv');
    document.addEventListener('click', function(event) {
        var isClickInside = specifiedElement.contains(event.target);
        if (isClickInside) {
          console.log('You clicked inside')
        }
        else {
          console.log('You clicked outside')
        }
    });
</script>
 

40







 $("#menuscontainer").click(function() {
    $(this).focus();
});
$("#menuscontainer").blur(function(){
    $(this).hide();
});
 

Benim i├žin i┼če yarar.


38







┼×imdi bunun i├žin bir eklenti var: d─▒┼č etkinlikler ( blog yaz─▒s─▒ )

T─▒klama taraf─▒ i┼čleyicisi (WLOG) bir ├Â─čeye ba─čl─▒ oldu─čunda a┼ča─č─▒dakiler olur :

  • ├ľ─če, t├╝m ├Â─čeleri clickoutside i┼čleyicileri i├žeren bir diziye eklenir
  • a ( ad alanl─▒ ) bir t─▒klama i┼čleyicisi belgeye ba─članm─▒┼č (daha ├Ânce orada de─čilse)
  • belgedeki herhangi bir t─▒klamada , t─▒klama dizisi olay─▒, o dizideki ├Â─čelere e┼čit olmayan ├Â─čeler veya t─▒klama hedeflerinin ├╝st ├Â─čelerine e┼čit olmaz
  • Ek olarak, clickoutside olay─▒ i├žin event.target , kullan─▒c─▒n─▒n t─▒klad─▒─č─▒ ├Â─čeye ayarlan─▒r (b├Âylece yaln─▒zca d─▒┼čar─▒da t─▒klad─▒klar─▒n─▒ de─čil, kullan─▒c─▒n─▒n neyi t─▒klatt─▒─č─▒n─▒ bile bilirsiniz)

Bu nedenle, hi├žbir olay─▒n yay─▒lmas─▒ engellenmez ve ek t─▒klama i┼čleyicileri, ├Â─čenin d─▒┼č i┼člemcisi ile birlikte "yukar─▒da" kullan─▒labilir.


37







Bu benim i├žin m├╝kemmel ├žal─▒┼čt─▒!

 $('html').click(function (e) {
    if (e.target.id == 'YOUR-DIV-ID') {
        //do something
    } else {
        //do something
    }
});
 

31







Ger├žekten d─▒┼čar─▒da t─▒kland─▒─č─▒nda men├╝y├╝ kapatmak i├žin ger├žekten ihtiyac─▒n─▒z oldu─čunu sanm─▒yorum; ─░htiyac─▒n─▒z olan ┼čey, kullan─▒c─▒ sayfan─▒n herhangi bir yerini t─▒klad─▒─č─▒nda men├╝n├╝n kapanmas─▒. Men├╝y├╝ t─▒klarsan─▒z veya men├╝den ├ž─▒karsan─▒z sa─ča m─▒ kapanmal─▒d─▒r?

Yukar─▒da tatmin edici bir cevap bulamam─▒┼č olmam, ge├žen g├╝n bu blog g├Ânderisini yazmam─▒ istedi . Daha bilgili i├žin, dikkat edilmesi gereken ├žok say─▒da yol var:

  1. T─▒klama s─▒ras─▒nda g├Âvde ├Â─česine bir t─▒klama olay─▒ i┼čleyicisi eklerseniz, men├╝y├╝ kapatmadan ve olay─▒ kald─▒rmadan ├Ânce 2. t─▒klamay─▒ bekledi─činizden emin olun. Aksi takdirde, men├╝y├╝ a├žan click olay─▒, men├╝y├╝ kapatmak zorunda olan dinleyiciye gider.
  2. Bir click olay─▒nda event.stopPropogation () kullan─▒yorsan─▒z, sayfan─▒zdaki hi├žbir ├Â─čenin t─▒klanacak bir ├Âzelli─či yoktur.
  3. Bir t─▒klama olay─▒ i┼čleyicisini g├Âvde ├Â─česine s├╝resiz olarak eklemek, performans a├ž─▒s─▒ndan iyi bir ├ž├Âz├╝m de─čildir
  4. Etkinli─čin hedefini ve ailesini i┼čleyicinin yarat─▒c─▒s─▒yla kar┼č─▒la┼čt─▒rmak, istedi─činizi, t─▒klatt─▒─č─▒n─▒zda men├╝y├╝ kapatmak oldu─čunu, ger├žekten istedi─činiz ┼čeyin sayfada herhangi bir yere t─▒klad─▒─č─▒n─▒zda kapatmak istedi─čini varsayar.
  5. G├Âvde eleman─▒ndaki olaylar─▒ dinlemek, kodunuzu daha k─▒r─▒lgan hale getirecektir. Bu onu k─▒racak kadar masum olarak ┼čekillendirmek: body { margin-left:auto; margin-right: auto; width:960px;}

25







Bir ba┼čka afi┼čin dedi─či gibi, ├Âzellikle g├Âr├╝nt├╝lemekte oldu─čunuz ├Â─čenin (bu durumda bir men├╝de) etkile┼čimli ├Â─čeleri varsa, ├žok say─▒da getcha vard─▒r. Olduk├ža sa─člam olmas─▒ i├žin a┼ča─č─▒daki y├Ântemi buldum:

 $('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            // your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});
 

24







Durum i├žin basit bir ├ž├Âz├╝m:

 $(document).mouseup(function (e)
{
    var container = $("YOUR SELECTOR"); // Give you class or ID

    if (!container.is(e.target) &&            // If the target of the click is not the desired div or section
        container.has(e.target).length === 0) // ... nor a descendant-child of the container
    {
        container.hide();
    }
});
 

Yukar─▒daki komut div , div click olay─▒n─▒n d─▒┼č─▒nda tetiklendi─činde gizlenir .

Daha fazla bilgi i├žin a┼ča─č─▒daki blogu g├Ârebilirsiniz: http://www.codecanal.com/detect-click-outside-div-using-javascript/


23







Solution1

Baz─▒ yanlar─▒ etkileyebilecek event.stopPropagation () kullanmak yerine, basit bir bayrak de─či┼čkeni tan─▒mlay─▒n ve bir if ko┼čul ekleyin . Bunu test ettim ve stopPropagation'─▒n herhangi bir yan etkisi olmadan d├╝zg├╝n ├žal─▒┼čt─▒m:

 var flag = "1";
$('#menucontainer').click(function(event){
    flag = "0"; // flag 0 means click happened in the area where we should not do any action
});

$('html').click(function() {
    if(flag != "0"){
        // Hide the menus if visible
    }
    else {
        flag = "1";
    }
});
 

Solution2

Sadece basit bir if ko┼čulla:

 $(document).on('click', function(event){
    var container = $("#menucontainer");
    if (!container.is(event.target) &&            // If the target of the click isn't the container...
        container.has(event.target).length === 0) // ... nor a descendant of the container
    {
        // Do whatever you want to do when click is outside the element
    }
});
 

21







Pencere t─▒klama olay hedefini kontrol edin (ba┼čka bir yerde yakalanmad─▒─č─▒ s├╝rece pencereye yay─▒lmal─▒d─▒r) ve men├╝ ├Â─čelerinin hi├žbiri olmad─▒─č─▒ndan emin olun. E─čer de─čilse, o zaman men├╝n├╝z├╝n d─▒┼č─▒ndas─▒n─▒z demektir.

Veya t─▒klaman─▒n konumunu kontrol edin ve men├╝ alan─▒ i├žinde olup olmad─▒─č─▒na bak─▒n.


20







B├Âyle bir ┼čeyle ba┼čar─▒ elde ettim:

 var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});
 

Mant─▒k ┼čudur: #menuscontainer g├Âsterildi─činde, #menuscontainer yaln─▒zca t─▒klama (hedef) ├Â─česinin ├žocu─ču de─čilse gizleyen g├Âvdeye bir t─▒klama i┼čleyicisi ba─člay─▒n .


17







Bir de─či┼čken olarak:

 var $menu = $('#menucontainer');
$(document).on('click', function (e) {

    // If element is opened and click target is outside it, hide it
    if ($menu.is(':visible') && !$menu.is(e.target) && !$menu.has(e.target).length) {
        $menu.hide();
    }
});
 

Olay yay─▒l─▒m─▒n─▒ durdurma konusunda hi├žbir sorunu yoktur ve ayn─▒ sayfada birden fazla men├╝y├╝ daha iyi destekler, ilk a├ž─▒kken ikinci bir men├╝ye t─▒kland─▒─č─▒nda stopPropagation ├ž├Âz├╝m├╝ndeki ilk a├ž─▒k b─▒rak─▒l─▒r.


16







Baz─▒ jQuery takvim eklentisinde bu y├Ântemi buldum.

 function ClickOutsideCheck(e)
{
  var el = e.target;
  var popup = $('.popup:visible')[0];
  if (popup==undefined)
    return true;

  while (true){
    if (el == popup ) {
      return true;
    } else if (el == document) {
      $(".popup").hide();
      return false;
    } else {
      el = $(el).parent()[0];
    }
  }
};

$(document).bind('mousedown.popup', ClickOutsideCheck);
 

13







Olay, "atalar─▒n─▒n t├╝m a─ča├ž s─▒ralar─▒nda statik s─▒ral─▒ listesi" olan ├Â─čenin event.path adl─▒ bir ├Âzelli─čine sahip . Bir olay─▒n belirli bir DOM ├Â─česinden mi, yoksa alt ├Â─čelerinden mi kaynakland─▒─č─▒n─▒ kontrol etmek i├žin, o belirli DOM ├Â─česinin yolunu kontrol etmeniz yeterlidir. Ayr─▒ca OR , some fonksiyondaki eleman kontrol├╝n├╝ mant─▒ksal olarak koyarak birden fazla eleman─▒ kontrol etmek i├žin de kullan─▒labilir .

 $("body").click(function() {
  target = document.getElementById("main");
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  })
  if (flag) {
    console.log("Inside")
  } else {
    console.log("Outside")
  }
}); 
 #main {
  display: inline-block;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
  </ul>
</div>
<div id="main2">
  Outside Main
</div> 

Yani davan─▒z i├žin olmal─▒

 $("body").click(function() {
  target = $("#menuscontainer")[0];
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  });
  if (!flag) {
    // Hide the menus
  }
});
 

13







─░┼čte gelecekteki izleyiciler i├žin vanilya JavaScript ├ž├Âz├╝m├╝.

Belgedeki herhangi bir ├Â─čeye t─▒kland─▒─č─▒nda, t─▒klanan ├Â─čenin kimli─či de─či┼čtirilirse veya gizli ├Â─če gizlenmemi┼čse ve gizli ├Â─če t─▒klanan ├Â─čeyi i├žermiyorsa, ├Â─čeyi de─či┼čtirin.

 (function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();
 

 (function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})(); 
 <a href="javascript:void(0)" id="toggle">Toggle Hidden Div</a>
<div id="hidden" style="display: none;">This content is normally hidden. click anywhere other than this content to make me disappear</div> 

Ayn─▒ sayfada birden ├žok ge├ži┼č olacaksa, ┼čunun gibi bir ┼čey kullanabilirsiniz:

  1. hidden Daralt─▒labilir ├Â─čeye s─▒n─▒f ad─▒n─▒ ekleyin .
  2. Dok├╝man t─▒kland─▒─č─▒nda, t─▒klanan ├Â─čeyi i├žermeyen ve gizli olmayan t├╝m gizli ├Â─čeleri kapat
  3. T─▒klanan ├Â─če bir ge├ži┼č ise, belirtilen ├Â─čeyi de─či┼čtirin.

 (function () {
    "use strict";
    var hiddenItems = document.getElementsByClassName('hidden'), hidden;
    document.addEventListener('click', function (e) {
        for (var i = 0; hidden = hiddenItems[i]; i++) {
            if (!hidden.contains(e.target) && hidden.style.display != 'none')
                hidden.style.display = 'none';
        }
        if (e.target.getAttribute('data-toggle')) {
            var toggle = document.querySelector(e.target.getAttribute('data-toggle'));
            toggle.style.display = toggle.style.display == 'none' ? 'block' : 'none';
        }
    }, false);
})(); 
 <a href="javascript:void(0)" data-toggle="#hidden1">Toggle Hidden Div</a>
<div class="hidden" id="hidden1" style="display: none;" data-hidden="true">This content is normally hidden</div>
<a href="javascript:void(0)" data-toggle="#hidden2">Toggle Hidden Div</a>
<div class="hidden" id="hidden2" style="display: none;" data-hidden="true">This content is normally hidden</div>
<a href="javascript:void(0)" data-toggle="#hidden3">Toggle Hidden Div</a>
<div class="hidden" id="hidden3" style="display: none;" data-hidden="true">This content is normally hidden</div> 


12







Asl─▒nda kimsenin kabullenmedi─či bir focusout olay─▒ ┼ča┼č─▒rtt─▒ :

 var button = document.getElementById('button');
button.addEventListener('click', function(e){
  e.target.style.backgroundColor = 'green';
});
button.addEventListener('focusout', function(e){
  e.target.style.backgroundColor = '';
}); 
 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <button id="button">Click</button>
</body>
</html> 


11







IE ve FF 3 i├žin komut dosyas─▒ kullan─▒yorsan─▒z * ve t─▒klaman─▒n belirli bir kutu alan─▒ i├žinde ger├žekle┼čip ger├žekle┼čmedi─čini bilmek istiyorsan─▒z, a┼ča─č─▒daki gibi bir ┼čey de kullanabilirsiniz:

 this.outsideElementClick = function(objEvent, objElement){   
var objCurrentElement = objEvent.target || objEvent.srcElement;
var blnInsideX = false;
var blnInsideY = false;

if (objCurrentElement.getBoundingClientRect().left >= objElement.getBoundingClientRect().left && objCurrentElement.getBoundingClientRect().right <= objElement.getBoundingClientRect().right)
    blnInsideX = true;

if (objCurrentElement.getBoundingClientRect().top >= objElement.getBoundingClientRect().top && objCurrentElement.getBoundingClientRect().bottom <= objElement.getBoundingClientRect().bottom)
    blnInsideY = true;

if (blnInsideX && blnInsideY)
    return false;
else
    return true;}
 

8







Ak─▒┼č kesintisi, blur / focus olay─▒ veya di─čer zor teknikler kullanmak yerine, olay ak─▒┼č─▒n─▒ ├Â─čenin akrabal─▒klar─▒yla e┼čle┼čtirin:

 $(document).on("click.menu-outside", function(event){
    // Test if target and it's parent aren't #menuscontainer
    // That means the click event occur on other branch of document tree
    if(!$(event.target).parents().andSelf().is("#menuscontainer")){
        // Click outisde #menuscontainer
        // Hide the menus (but test if menus aren't already hidden)
    }
});
 

T─▒kla d─▒┼č etkinlik dinleyicisini kald─▒rmak i├žin:

 $(document).off("click.menu-outside");
 

8







kullan─▒n:

 var go = false;
$(document).click(function(){
    if(go){
        $('#divID').hide();
        go = false;
    }
})

$("#divID").mouseover(function(){
    go = false;
});

$("#divID").mouseout(function (){
    go = true;
});

$("btnID").click( function(){
    if($("#divID:visible").length==1)
        $("#divID").hide(); // Toggle
    $("#divID").show();
});
 

8







Belgeye bir t─▒klama olay─▒ dinleyicisi ba─člay─▒n. Olay dinleyicisinin i├žinde, hangi nesnenin t─▒kland─▒─č─▒n─▒ g├Ârmek i├žin olay nesnesine , ├Âzellikle, event.target dosyas─▒na bakabilirsiniz :

 $(document).click(function(e){
    if ($(e.target).closest("#menuscontainer").length == 0) {
        // .closest can help you determine if the element 
        // or one of its ancestors is #menuscontainer
        console.log("hide");
    }
});
 

6







 $(document).click(function() {
    $(".overlay-window").hide();
});
$(".overlay-window").click(function() {
    return false;
});
 

Belgeye t─▒klarsan─▒z, ayn─▒ ├Â─čeyi t─▒klatmad─▒k├ža belirli bir ├Â─čeyi gizleyin.


5







En pop├╝ler cevap i├žin oy verin, ancak ekleyin

 && (e.target != $('html').get(0)) // ignore the scrollbar
 

bu nedenle, kayd─▒rma ├žubu─čuna t─▒klamak hedef elementinizi [gizlemez ya da her neyse] yapmaz.


5







Daha kolay kullan─▒m ve daha etkileyici kod i├žin, bunun i├žin bir jQuery eklentisi olu┼čturdum:

 $('div.my-element').clickOut(function(target) { 
    //do something here... 
});
 

Not: Hedef , kullan─▒c─▒n─▒n ger├žekten t─▒klad─▒─č─▒ ├Â─čedir. E─čer kullanmak b├Âylece Ama geri arama hala orijinal eleman─▒n ba─člam─▒nda y├╝r├╝t├╝l├╝r bu bir jQuery geri d├Ân├╝┼č├╝nde yer bekledi─činiz gibi.

Eklenti:

 $.fn.clickOut = function (parent, fn) {
    var context = this;
    fn = (typeof parent === 'function') ? parent : fn;
    parent = (parent instanceof jQuery) ? parent : $(document);

    context.each(function () {
        var that = this;
        parent.on('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.is(that) && !clicked.parents().is(that)) {
                if (typeof fn === 'function') {
                    fn.call(that, clicked);
                }
            }
        });

    });
    return context;
};
 

Varsay─▒lan olarak, t─▒klama olay─▒ dinleyicisi belgeye yerle┼čtirilir. Bununla birlikte, etkinlik dinleyici kapsam─▒n─▒ s─▒n─▒rlamak istiyorsan─▒z, t─▒klamalar─▒n dinlenece─či ├╝st ├╝st ├Â─če olacak ├╝st d├╝zey ├Â─čeyi temsil eden bir jQuery nesnesine ge├žebilirsiniz. Bu gereksiz belge seviyesi olay dinleyicilerini ├Ânler. A├ž─▒k├žas─▒, verilen ana ├Â─če ba┼člang─▒├žtaki ├Â─čenin ebeveyni olmad─▒─č─▒ s├╝rece i┼če yaramaz.

├ľyle kullan─▒n:

 $('div.my-element').clickOut($('div.my-parent'), function(target) { 
    //do something here...
});
 

5







Bu ┼čekilde YUI  3'te yapt─▒m :

 // Detect the click anywhere other than the overlay element to close it.
Y.one(document).on('click', function (e) {
    if (e.target.ancestor('#overlay') === null && e.target.get('id') != 'show' && overlay.get('visible') == true) {
        overlay.hide();
    }
});
 

Ata'n─▒n widget ├Â─česi kab─▒
olup olmad─▒─č─▒n─▒, hedefin
widget'─▒ / ├Â─čeyi a├ž─▒p a├žmad─▒─č─▒n─▒, kapatmak istedi─čim widget / ├Â─čenin zaten a├ž─▒k olup olmad─▒─č─▒n─▒ kontrol ediyorum (o kadar ├Ânemli de─čil).


5







Burada merakl─▒ biri javascript ├ž├Âz├╝m├╝ ise (es6):

 window.addEventListener('mouseup', e => {
        if (e.target != yourDiv && e.target.parentNode != yourDiv) {
            yourDiv.classList.remove('show-menu');
            //or yourDiv.style.display = 'none';
        }
    })
 

ve es5, sadece durumda:

 window.addEventListener('mouseup', function (e) {
if (e.target != yourDiv && e.target.parentNode != yourDiv) {
    yourDiv.classList.remove('show-menu'); 
    //or yourDiv.style.display = 'none';
}
 

});


5







─░┼čte saf javascript ile basit bir ├ž├Âz├╝m. ├ľyle kadar g├╝ncel ES6 ile :

 var isMenuClick = false;
var menu = document.getElementById('menuscontainer');
document.addEventListener('click',()=>{
    if(!isMenuClick){
       //Hide the menu here
    }
    //Reset isMenuClick 
    isMenuClick = false;
})
menu.addEventListener('click',()=>{
    isMenuClick = true;
})
 

5



─░lgili yay─▒nlar


Belirli bir ├Â─čeyi JavaScript'teki bir diziden nas─▒l kald─▒r─▒r─▒m?

Bir ├Â─čenin jQuery'de gizli olup olmad─▒─č─▒n─▒ nas─▒l kontrol ederim?

Bir HTML ├Â─česinin jQuery kullanarak bo┼č olup olmad─▒─č─▒n─▒ nas─▒l kontrol ederim?

D─▒┼čtaki t─▒klamay─▒ algla bile┼čeni React bile┼čeni

Ta┼čan bir Div i├žindeki bir ├Â─čeye nas─▒l ilerlerim?

% 100 geni┼člikte bir div i├žindeki mutlak konumland─▒r─▒lm─▒┼č bir eleman─▒ nas─▒l yatay olarak ortalayabilirim? [├žift]

─░lk ├Â─čeyi .net i├žindeki bir IEnumerable <T> ├Â─česinden nas─▒l alabilirim?

JavaScript kullanarak bir ├Â─čeye nas─▒l kayd─▒r─▒r─▒m?

Bir ├Â─čenin JavaScript'te ger├žekten g├Âr├╝n├╝r olup olmad─▒─č─▒n─▒ nas─▒l kontrol ederim? [├žift]

D─▒┼čtaki t─▒klamay─▒ alg─▒la

Etiketle ilgili di─čer sorular [javascript]


Dizeleri, birden fazla s├Âzc├╝k s─▒n─▒rlay─▒c─▒s─▒ olan s├Âzc├╝klere b├Âlme

Android programl─▒ olarak ekran yo─čunlu─čunu elde?

Java, C# b├Âlgesinde # b├Âlgeye e┼čde─čerdir

Scala, ima edilen yerleri nerede arar?

Par├žal─▒ Android Se├ženekleri Men├╝s├╝

nodejs vs nub 12.04 ├╝zerindeki d├╝─č├╝m

ÔÇť'NSString *' tipine 'const NSString *' g├Ânderme niteleyicileri atarÔÇŁ uyar─▒s─▒

Emacs'ta yaz─▒ tipi boyutu nas─▒l ayarlan─▒r?

Dizi Listesini Tersine Çevirmenin En Kolay Yolu Nedir?

Tamsay─▒y─▒ ba┼čtaki s─▒f─▒rlarla dize olarak bi├žimlendirmenin en iyi yolu? [├žift]