Element xaricindəki klikləri necə müəyyən etmək olar?

Istifadəçi bu menyuların başlığını tıkladığında tam olaraq göstərdiyim bəzi HTML menyularim var. Istifadəçi menyu sahəsi xaricində tıkladığında bu maddələr gizlətmək istərdim.

Bu kimi bir şey jQuery ilə mümkündürmü?

 $("#menuscontainer").clickOutsideThisElement(function() { // Hide the menus }); 
2160
30 сент. Sergio del Amo tərəfindən təyin olunan 30 sep. 2008-09-30 16:17 '08 at 4:17 pm 2008-09-30 16:17
@ 78 cavab
  • 1
  • 2
  • 3

Qeyd. stopEventPropagation() istifadə DOM-da normal hadisələrin axını pozduğundan yola stopEventPropagation() . Daha ətraflı məlumat üçün bu yazıya baxın. Bunun əvəzinə bu üsuldan istifadə edin.

Pəncərəni bağlayan sənədin gövdəsinə bir tıklama hadisə əlavə edin. Sənədin bünövrəsində paylamağı dayandıran konteynerə ayrı bir klik hadisəsi əlavə edin.

 $(window).click(function() { //Hide the menus if visible }); $('#menucontainer').click(function(event){ event.stopPropagation(); }); 
1671
30 сент. Cavab Eran Galperin tərəfindən 30 sentyabrda verilir 2008-09-30 16:38 '08 at 4:38 pm 2008-09-30 16:38

document üçün #menucontainer hadisəsini dinləyə və sonra # #menucontainer .closest() ilə .closest() elementinin atası və ya hədəfi olmadığından əmin ola bilərsiniz.

Əgər belə deyilsə, #menucontainer element elementi #menucontainer xaricindədir və təhlükəsiz #menucontainer bilər.

 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) } 
border=0

Düzenle - 2018-03-11

JQuery istifadə etmək istəməyənlər üçün. Aşağıda düz vanillaJS (ECMAScript6) kodudur.

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest. 

1212
12 июня '10 в 11:35 2010-06-12 11:35 Cavab 12 iyun '10' da saat 11: 35-də verilmişdir. 2010-06-12 11:35

Elementdən kənara vurmağı necə müəyyən etmək olar?

Bu sual bu qədər məşhurdur və çoxlu cavablara səbəb olur ki, bu aldadıcı kompleksdir. Təxminən səkkiz ildən sonra onlarla cavab verdikdən sonra, əlçatanlığa nə qədər az diqqət ayırdığını görməyə həqiqətən təəccübləndim.

Istifadəçi menyu sahəsi xaricində tıkladığında bu maddələr gizlətmək istərdim.

Bu nəcib bir səbəbdir və əsl problemdir. Sualın adı cavabların əksəriyyətinin həll etməyə çalışdığı kimi görünür, bədbəxt bir qırmızı sviter var.

İpucu: bu söz "klik" dir!

Əslində, klik işleyicilerini bağlamaq istəmirik.

Klik işleyicilerini informasiya qutusunu bağlamaq üçün bağlasanız, artıq başarısız oldunuz. Başarısız olduğunuz səbəb, hər kəsin tıklama hadisələrini tetiklemediği. Siçan istifadə etməyən istifadəçilər, Səbətə basaraq, informasiya qutusundan çıxa biləcəklər (və popup menyusu bir dialoq növü ola bilər) və sonra bir kliklə başlamadan kontaktın arxasında olan məzmunu oxuya bilməzlər.

Beləliklə, sualları təkrarlayaq.

İstifadəçi bununla bitdikdə dialoqun necə bağlanması lazımdır?

Bu məqsəddir. Təəssüf ki, indi userisfinishedwiththedialog hadisə bağlamaq lazımdır və bu məcburi sadə deyil.

Beləliklə, bir istifadəçinin dialoqdan istifadə etməsini necə başa düşə bilərik?

focusout hadisə

Yaxşı bir başlanğıc, dialoqun dialoqdan ayrıldığını müəyyən etməkdir.

İpucu: hadisə blur ilə diqqətli olun, hadisə köpüklənmə mərhələsi ilə əlaqəli olarsa, blur tətbiq olunmur!

jQuery focusout olacaq. JQuery istifadə edə bilmirsinizsə, tutma mərhələsində blur istifadə edə bilərsiniz:

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

Ayrıca, bir çox informasiya qutusu üçün, konteynerin odaklanmasına izin vermeniz lazımdır. tabindex="-1" əlavə et ki, informasiya qutusu tabindex="-1" axını pozmadan dinamik şəkildə diqqət ala bilər.

 div { display: none; } .active { display: block; } 
Example <div id="example" tabindex="-1"> Lorem ipsum <a href="http://example.com">dolor sit amet. </div> 

Bu demo ilə bir dəqiqədən çox oynarsanız, problemləri tez bir zamanda həll etməlisiniz.

Birincisi, informasiya qutusundakı link mövcud deyil. Bunun üzərinə basmaq və ya bir sekmeyle əlaqə qurma əvvəli, qarşılıqlı təsirlərdən əvvəl informasiya qutusunu bağlayacaqsınız. Bu, daxili elementə odaklanmanın focusin hadisəsini focusin önce bir focusout focusin .

Düzeltmə hadisə loopunda bir dövlət sırasıdır. setImmediate(...) və ya setTimeout(..., 0) istifadə edərək, setImmediate(...) dəstəkləməyən brauzerlər üçün istifadə edilə bilər. focusin bir sonrakı focusin tərəfindən ləğv edilə bilər:

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

 div { display: none; } .active { display: block; } 
Example <div id="example" tabindex="-1"> Lorem ipsum <a href="http://example.com">dolor sit amet. </div> 

İkinci problem isə, linki yenidən vurduğunuzda dialoqun bağlanmayacağıdır. Bu, dialoqun bağlanması üçün bir tetikleyiciye səbəb olan dialoqun itirilməsindən asılıdır, bundan sonra linki tıklayaraq dialoqun açılmasına səbəb olur.

Əvvəlki bəyanatda olduğu kimi, diqqət mərkəzində olmaq lazımdır. Dövlət dəyişikliyinin artıq sıraya alındığını nəzərə alaraq, interaktiv rejimdə yalnız diqqət mərkəzində olan hadisələrin işlənməsi məsələsidir:

Tanıdım.
 $('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; } 
Example <div id="example" tabindex="-1"> Lorem ipsum <a href="http://example.com">dolor sit amet. </div> 

Esc açarı

Hər şeyin mərkəzləşdirilmiş vəziyyətlərin idarə edilməsi ilə nəticələndiyini düşünürsəniz, istifadəçi təcrübəsini asanlaşdırmaq üçün daha çox şey edə bilərsiniz.

Bu, tez-tez "xoşdur", lakin adətən, siz Esc düyməsini bağlayan hər hansı bir modal və ya pop-up faylınız olduqda olur.

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

 div { display: none; } .active { display: block; } 
Example <div id="example" tabindex="-1"> Lorem ipsum <a href="http://example.com">dolor sit amet. </div> 

Əlaqə qutusuna xüsusi elementlər olduğunu bilirsinizsə, dialoqa birbaşa diqqət yetirməyinizə ehtiyac yoxdur. Bir menyu yaratsanız, ilk menyu maddəinə diqqət edə bilərsiniz.

 click: function (e) { $(this.hash) .toggleClass('submenu--active') .find('a:first') .focus(); 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; } 
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 sit amet. 

WAI-ARIA rolları və digər əlçatanlıq dəstəyi

Ümid edirəm ki, bu funksiya üçün mövcud klaviatura və siçan dəstəyinin əsaslarını əhatə edirəm, amma bu çox əhəmiyyətli olduğundan WAI-ARIA-nın rolları və xüsusiyyətlərini müzakirə etməyəcəyəm, amma geliştiricilərin ətraflı məlumat üçün spesifikasiyaya baxmasını məsləhət görürəm istifadə edəcəyi rollar və digər müvafiq xüsusiyyətlər.

220
12 июля '16 в 2:29 2016-07-12 02:29 Cavab zzzzBov 12 iyul '16 'da 2:29 ' də verilir 2016-07-12 02:29

Burada başqa həllər mənim üçün işləməyib, mən də istifadə etməliyəm:

 if(!$(event.target).is('#foo')) { // hide menu } 
132
07 июля '09 в 2:10 2009-07-07 02:10 Cavab Dennisə 07.07.2009 tarixində 2:10 'də verildi. 2009-07-07 02:10

Menyunu açarkən bədənə bir tıklama hadisəsi əlavə etdiyim istisna olmaqla, Eran nümunəsinə bənzər bir tətbiq var ... Kinda belədir:

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

JQuery one() funksiyası haqqında daha ətraflı məlumat

122
30 сент. Joe Lencioni tərəfindən verilmiş cavab 30 sentyabr 2008-09-30 21:13 '08 at 9:13 pm 2008-09-30 21:13
 $("#menuscontainer").click(function() { $(this).focus(); }); $("#menuscontainer").blur(function(){ $(this).hide(); }); 

Mənim üçün gözəl işləyir.

36
17 нояб. Cavab 17 noyabr tarixində user212621 tərəfindən verilmişdir . 2009-11-17 09:13 '09 at 9:13 'da 2009-11-17 09:13

Bunun üçün bir plugin var: xarici hadisələr ( blog post )

Clickoutside (WLOG) işleyicisi bir elementə bağlı olduqda aşağıdakılar olur:

  • bir element, clickoutside işleyicileriyle bütün elementləri ehtiva edən bir sıra əlavə edilir.
  • bir ( ad verilmiş ) klik işleyicisi sənədə bağlıdır (əgər mövcud deyilsə)
  • sənəddə hər hansı bir tıklamada, clickoutside hadisə, bu dizidəki elementlər üçün bərabər olmayan və ya hədəf-tıklamanın üst obyekti üçün tetiklenir
  • Bundan əlavə, clickoutside hadisə üçün event.target istifadəçinin tıkladığı elementə (belə ki, istifadəçinin tıkladığı və kənardan tıkladığını deyil, hətta bildiyiniz) də təyin olunur.

Beləliklə, yayılma səbəbindən heç bir hadisənin ləğv edilməməsi və xarici işəgötürənin köməyi ilə "yuxarıda" əlavə klik işləyicilərindən istifadə edilə bilər.

35
05 апр. Cavab Wolfram tərəfindən verilir 05 Apr 2010-04-05 13:07 '10 at 13:07 2010-04-05 13:07

Tədqiqat aparıldıqdan sonra üç iş həllini tapdım (istinad üçün istinad səhifələrindəki linkləri unutdum)

İlk qərar

 <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');  } else { clickFlag=0; } }); $('body').on('click','#testDiv', function (event) { clickFlag = 1; console.log('showed the element');  }); </script> 

İkinci həll

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

Üçüncü həll

 <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> 
32
02 нояб. Cavab Rameez Rami verildi 02 Noyabr. 2015-11-02 11:33 '15 'də saat 11:33 ' da

Mənim üçün böyük iş gördü!

 $('html').click(function (e) { if (e.target.id == 'YOUR-DIV-ID') { //do something } else { //do something } }); 
29
04 июня '12 в 17:08 2012-06-04 17:08 cavab 04 iyun '12 'də saat 17:08' də verilir. 2012-06-04 17:08

İstifadəçi tıkladığında həqiqətən menyunu bağlamağınız lazım olduğunu düşünmürəm; istifadəçi səhifədə hər hansı bir yerə tıkladığında yaxınlaşmaq üçün menyu lazımdır. Bir menyuda və ya kənar bir menəyə tıkladığınız zaman, onu düzgün bağlamalıdırmı?

Dəyərli cavablar tapmasa, mən bu blogun yazısını günündən yazmağı xahiş etdim. Daha çox pedantik olmaq üçün bir sıra səhvlər var:

  • Bir klik işi işəgötürənini bir klik zamanı bədən elementinə əlavə etsəniz, menyunu bağlamadan və hadisəni açmadan əvvəl ikinci bir sətri gözləyin. Əks halda, menyunu açan tıklama hadisə, dinləyicinin ekranında görünəcək, kimin menyunu bağlamalıdır.
  • Bir klik etkinlikinde event.stopPropogation () öğesini kullanırsanız, sayfanızdaki başqa heç bir element klik-harada-to-yaxın funksiyası ola bilməz.
  • Bir cədvəl işləyicisini cisim elementinə əlavə etmək məhdud deyil, effektiv bir həll deyil.
  • Tədbirin məqsədini və valideynlərini işəgötürənin yaradıcısı ilə müqayisə edərək, siz onu tıkladığınızda menyunu bağlamaq istədiyiniz zaman, həqiqətən istədiyi zaman səhifənin hər hansı bir yerini tıkladığınız zaman onu bağlamaq lazımdır.
  • Bədənin elementi ilə bağlı hadisələri dinləmək kodunuzu daha qəribələşdirəcəkdir. Stil onu poza bilər kimi günahsızdır: body { margin-left:auto; margin-right: auto; width:960px;} body { margin-left:auto; margin-right: auto; width:960px;}
24
19 мая '11 в 0:15 2011-05-19 00:15 Cavab 19: 00 -da veriləcək

Başqa bir poster kimi, bir çox səhvlər var, xüsusən də göstərdiyiniz element (bu halda, menyuda) interaktiv elementlərə malik olduqda. Aşağıdakı üsulu olduqca etibarlı tapdım:

 $('#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); } }) }); 
23
22 дек. 22 dekabrda benb tərəfindən verilmiş cavab 2011-12-22 14:59 '11 'da 14:59' da 2011-12-22 14:59

Vəziyyətə sadə bir həll:

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

div dair hadisə div yuxarıda göstərilən skript div gizlədir.

Daha ətraflı məlumat üçün aşağıdakı bloga baxın: http://www.codecanal.com/detect-click-outside-div-using-javascript/

20
15 дек. Cavab Jitendra Damor tərəfindən 15 dekabrda verilir. 2015-12-15 06:50 '15 saat 06:50 'da 2015-12-15 06:50

Pəncərə tıklaması hadisəsinin hədəf nöqtəsini yoxlayın (hər hansı bir yerə tutulmadıqda pəncərədə paylanmalıdır) və bu menyu elementlərindən biri olmadığına əmin olun. Əgər yoxsa, menyudan çıxmısınız.

Və ya klik mövqeyini yoxlayın və menyu sahəsində olub olmadığını yoxlayın.

18
30 сент. Sep 30-də Chris MacDonald tərəfindən verilmiş cavab 2008-09-30 16:20 '08 at 4:20 pm 2008-09-30 16:20

Həll1

Yan təsirləri olan bəzi event.stopPropagation () istifadə etmək əvəzinə, sadə bir bayraq dəyişənini müəyyənləşdirin və şərtləri bir əlavə edin. Mən sınaqdan keçirdim və stopPropagation'in heç bir yan təsiri olmadan yaxşı işləyirdim:

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

Həll2

Sadə bir şərtlə istifadə edin:

 $(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 } }); 
18
28 янв. Cavab İman Sedighi 28 yanvar 2015-01-28 20:24 '15 saat 20:24 'də 2015-01-28 20:24

Bu kimi bir şey ilə uğur qazandım:

 var $menuscontainer = ...; $('#trigger').click(function() { $menuscontainer.show(); $('body').click(function(event) { var $target = $(event.target); if ($target.parents('#menuscontainer').length == 0) { $menuscontainer.hide(); } }); }); 

Məntiq aşağıdakı kimidir: #menuscontainer göstərildikdə, klik işleyicisini hədəf (klik) uşağı deyilsə, #menuscontainer gizlədir edən bir #menuscontainer .

15
02 дек. Cavab Chu Yeow tərəfindən verilir 02 Dekabr. 2010-12-02 12:53 '10 at 12:53 2010-12-02 12:53

Bir seçim olaraq:

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

Hadisələrin bölüşdürülməsini dayandırmaqla heç bir problemi yoxdur və ilk səhifə açdığınız zaman ikinci menyuda tıklandığında stopPropagation həllində ilk kəşfini buraxacaq eyni səhifədə bir neçə menyu saxlayır.

14
24 июля '14 в 12:41 2014-07-24 12:41 Cavab Bohdan Lyzanets tərəfindən 24 İyul, '14 'da 12:41 2014-07-24 12:41

Bu üsulu bəzi jQuery təqvim pluginində tapdım.

 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); 
12
28 июля '11 в 17:06 2011-07-28 17:06 Cavab qətnamə ilə verilir 28 iyul 'da 17:06 2011-07-28 17:06

Gələcək izləyicilər üçün vanil javascript üçün həll.

Sənədin içərisində hər hansı bir elementə tıklandığında, tıklanan element identifikatoru tıklandığında və ya gizli element gizli deyilsə və gizli element bir kliklə bir element içermiyorsa elementə keçin.

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

Eyni səhifədə bir neçə şifrəniz varsa, belə bir şey istifadə edə bilərsiniz:

  • Katlanan elementə hidden sinif adını əlavə edin.
  • Bir sənədə vurduğunuzda, bir kliklə bir maddə içerməyən və gizli olmayan bütün gizli maddələr bağlan.
  • Tıklanan element bir keçid varsa, müəyyən elementi keçin.

10
20 мая '15 в 1:52 2015-05-20 01:52 cavab mayın 20-də mayın 15-də saat 15: 15-da veriləcək

Bir hadisə elementin event.path adlı bir əmlaka malikdir, bu "ağac sırası içində bütün atalarından statik sifariş siyahısı" dir. Bir hadisənin müəyyən bir DOM elementindən və ya alt elementlərindən birinin olub olmadığını yoxlamaq üçün sadəcə həmin DOM elementinin yolunu yoxlayın. some funksiyanın elementini yoxlayarkən mantıksal bir neçə elementi yoxlamaq üçün də istifadə edilə bilər.

 #main { display: inline-block; } 
14 апр. Cavab Dan Philip 14 apr tərəfindən verilir . '17 в 7:27 2017-04-14 07:27

Вместо использования прерывания потока, события размытия/фокусировки или любой другой сложной техники просто сопоставьте поток событий с родством элементов:

 $(document).on("click.menu-outside", function(event){ // Test if target and it 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) } }); 

Чтобы удалить прослушиватель внешних событий, просто:

 $(document).off("click.menu-outside"); 
8
ответ дан mems 05 июня '13 в 18:05 2013-06-05 18:05

Если вы используете скрипты для IE и FF 3. *, и вы просто хотите знать, произошел ли щелчок в определенной области окна, вы также можете использовать что-то вроде:

 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
ответ дан Erik 14 авг. '09 в 17:08 2009-08-14 17:08

İstifadə edin:

 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(); }); 
7
ответ дан webenformasyon 10 янв. '11 в 2:47 2011-01-10 02:47

Подключить к документу прослушиватель событий щелчка. Внутри прослушивателя событий вы можете посмотреть объект события , в частности, event.target , чтобы увидеть, какой элемент был нажат:

 $(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
ответ дан Salman A 03 мая '12 в 12:21 2012-05-03 12:21

Для более удобного использования и более выразительного кода я создал для него плагин jQuery:

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

Qeyd target - это элемент, который пользователь нажал. Но обратный вызов все еще выполняется в контексте исходного элемента, поэтому вы можете использовать этот , как вы ожидали бы в обратном вызове jQuery.

Plugin:

 $.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; }; 

По умолчанию прослушиватель событий кликов помещается в документ. Однако, если вы хотите ограничить область прослушивателя событий, вы можете передать объект jQuery, представляющий элемент родительского уровня, который будет основным родителем, по которому будут прослушиваться клики. Это предотвращает ненужные прослушиватели событий уровня документа. Очевидно, что это не сработает, если родительский элемент не является родителем вашего начального элемента.

Используйте так:

 $('div.my-element').clickOut($('div.my-parent'), function(target) { //do something here... }); 
5
ответ дан Matt Goodwin 21 апр. '16 в 23:04 2016-04-21 23:04

Я сделал это так: YUI 3:

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

Я проверяю, не является ли предком не контейнер элементов виджета,
если цель не та, которая открывает виджет/элемент,
если виджет/элемент, который я хочу закрыть, уже открыт (не так важно).

5
ответ дан Satya Prakash 06 дек. '11 в 16:42 2011-12-06 16:42
 $(document).click(function() { $(".overlay-window").hide(); }); $(".overlay-window").click(function() { return false; }); 

Если вы нажмете на документ, скройте данный элемент, если вы не нажмете на тот же самый элемент.

5
ответ дан Rowan 20 сент. '11 в 21:44 2011-09-20 21:44

Я удивлен, что никто на самом деле не признал событие focusout :

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button id="button">Click</button> </body> </html> 
5
ответ дан Jovanni G 12 февр. '18 в 13:39 2018-02-12 13:39

Перейдите на самый популярный ответ, но добавьте

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

поэтому щелчок по полосе прокрутки не [скрыть или что-либо еще] вашего целевого элемента.

5
ответ дан bbe 26 июля '15 в 0:33 2015-07-26 00:33

Мы внедрили решение, частично основанное на комментарии пользователя выше, который отлично работает для нас. Мы используем его, чтобы скрыть окно поиска/результаты при нажатии вне этих элементов, исключая исходный элемент.

 // HIDE SEARCH BOX IF CLICKING OUTSIDE $(document).click(function(event){ // IF NOT CLICKING THE SEARCH BOX OR ITS CONTENTS OR SEARCH ICON if ($("#search-holder").is(":visible")  !$(event.target).is("#search-holder *, #search")) { $("#search-holder").fadeOut('fast'); $("#search").removeClass('active'); } }); 

Он проверяет, действительно ли окно поиска уже видимо и в нашем случае оно также удаляет активный класс в кнопке поиска/поиска.

4
ответ дан Scott Richardson 08 июля '15 в 4:05 2015-07-08 04:05

Bu işləməlidir:

 $('body').click(function (event) { var obj = $(event.target); obj = obj['context']; // context : clicked element inside body if ($(obj).attr('id') != "menuscontainer"  $('#menuscontainer').is(':visible') == true) { //hide menu } }); 
4
ответ дан Bilal Berjawi 12 янв. '13 в 14:43 2013-01-12 14:43
  • 1
  • 2
  • 3

tags ilə bağlı digər suallar və ya bir sual