Як вызначыць клік па-за элемента?

У мяне ёсць некаторыя HTML-меню, якія я паказваю цалкам, калі карыстальнік націскае на загаловак гэтых меню. Я хацеў бы схаваць гэтыя элементы, калі карыстальнік пстрыкае за межамі вобласці меню.

Нешта накшталт гэтага магчыма з jQuery?

 $("#menuscontainer").clickOutsideThisElement(function() { // Hide the menus }); 
2160
30 сент. зададзены Sergio del Amo 30 сент. 2008-09-30 16:17 '08 у 16:17 2008-09-30 16:17
@ 78 адказаў
  • 1
  • 2
  • 3

ЗАЎВАГА. Варта пазбягаць выкарыстання stopEventPropagation() , паколькі яно парушае нармальны паток падзей у DOM. Глядзіце гэтую артыкул для атрымання дадатковай інфармацыі. Паспрабуйце выкарыстоўваць гэты метад замест

Прымацуеце падзея пстрычкі да цела дакумента, якое закрывае акно. Прымацуеце асобную падзею пстрычкі да кантэйнера, які спыняе распаўсюд у целе дакумента.

 $(window).click(function() { //Hide the menus if visible }); $('#menucontainer').click(function(event){ event.stopPropagation(); }); 
1671
30 сент. адказ дадзены Eran Galperin 30 сент. 2008-09-30 16:38 '08 у 16:38 2008-09-30 16:38

Вы можаце праслухаць падзея click для document а затым пераканацца, што #menucontainer не з'яўляецца продкам або мэтай .closest() элемента з дапамогай .closest() .

Калі гэта не так, то #menucontainer элемент знаходзіцца за межамі #menucontainer і яго можна смела хаваць.

 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

Рэдагаваць - 2018/03/11

Для тых, хто не хоча выкарыстоўваць jQuery. Тут прыведзены вышэй код у просты vanillaJS (ECMAScript6).

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

1212
12 июня '10 в 11:35 2010-06-12 11:35 адказ дадзены Art 12 чэрвеня '10 У 11:35 2010-06-12 11:35

Як выявіць клік па-за элемента?

Прычына, па якой гэтае пытанне настолькі папулярны і мае так шмат адказаў, складаецца ў тым, што ён зманліва складаны. Пасля амаль васьмі гадоў і дзясяткаў адказаў я шчыра здзіўлены, убачыўшы, як мала ўвагі надаецца даступнасці.

Я хацеў бы схаваць гэтыя элементы, калі карыстальнік пстрыкае за межамі вобласці меню.

Гэта высакародную справу і з'яўляецца актуальнай праблемай. Назва пытання - гэта тое, што большасць адказаў, па-відаць, спрабуе вырашыць, змяшчае няшчасную чырвоную селядзец.

Падказка: гэта слова "click"!

На самай справе вы не хочаце прывязваць апрацоўшчыкі клікаў.

Калі вы прывязваеце апрацоўшчыкі клікаў, каб закрыць дыялогавае акно, вы ўжо пацярпелі няўдачу. Прычына, па якой вы пацярпелі няўдачу, складаецца ў тым, што не кожны выклікае падзеі click . Карыстальнікі, якія не выкарыстоўваюць мыш, змогуць выйсці з вашага дыялогавага акна (і ваша ўсплывальнае меню, магчыма, з'яўляецца тыпам дыялогу), націснуўшы Tab, і тады яны не змогуць прачытаць змесціва за дыялогам без наступнага запуску а click .

Так што давайце Перафразуючы пытанне.

Як зачыніць дыялог, калі карыстальнік скончыў з ім?

Гэта мэта. На жаль, цяпер нам трэба звязаць падзея userisfinishedwiththedialog , і гэта звязванне не так проста.

Такім чынам, як мы можам выявіць, што карыстальнік скончыў выкарыстанне дыялёгу?

focusout падзея

Добрым пачаткам з'яўляецца вызначэнне таго, пакінуў Ці фокус дыялог.

Падказка: будзьце асцярожныя з падзеяй blur , blur не распаўсюджваецца, калі падзея было звязана з фазай барботирования!

Jquery focusout будзе выдатна. Калі вы не можаце выкарыстоўваць jQuery, вы можаце выкарыстоўваць blur на этапе захопу:

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

Акрамя таго, для многіх дыялогаў вам трэба будзе дазволіць кантэйнеру атрымаць фокус. Дадайце tabindex="-1" , каб дыялогавае акно магло атрымліваць фокус дынамічна, не перарываючы пры гэтым струмень табуляцыі.

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

Калі вы гуляеце з гэтай дэманстрацыяй больш за хвіліну, вы павінны хутка пачаць праглядаць праблемы.

Па-першае, спасылка ў дыялогавым акне не даступная. Спроба пстрыкнуць па ім ці ўкладку да яе прывядзе да закрыцця дыялогавага акна да таго, як адбудзецца ўзаемадзеянне. Гэта звязана з тым, што факусоўка ўнутранага элемента выклікае падзея focusout перад тым, як зноў запусціць падзея focusin .

Выпраўленне - чарга на змяненне стану ў цыкле падзей. Гэта можна зрабіць, выкарыстоўваючы setImmediate(...) або setTimeout(..., 0) для браўзэраў, якія не падтрымліваюць setImmediate . Пасля таго, як ён пастаўлены ў чаргу, ён можа быць адменены наступным 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')); } }); 

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

Другая праблема заключаецца ў тым, што дыялог не будзе закрывацца пры паўторным націску спасылкі. Гэта звязана з тым, што дыялог губляе фокус, выклікаючы спрацоўванне па закрыцця, пасля чаго пстрычка па спасылцы выклікае адкрыццё дыялогавага акна.

Як і ў папярэднім выпуску, трэба кіраваць станам факусоўкі. Улічваючы, што змяненне стану ўжо пастаўлена ў чаргу, гэта ўсяго толькі пытанне апрацоўкі фокусных падзей у дыялогавым рэжыме:

Гэта павінна выглядаць знаёма
 $('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 ключ

Калі вы лічыце, што ўсё зроблена, кіруючы станамі факусоўкі, вы можаце зрабіць больш, каб спрасціць працу з карыстальнікам.

Гэта часта бывае "прыемна мець", але звычайна бывае, што калі ў вас ёсць мадальны або ўсплывае файл любога тыпу, які закрывае яго клавіша Esc.

 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> 

Калі вы ведаеце, што ў дыялогавым акне ёсць наладжвальныя элементы, вам не трэба наўпрост сфакусаваць дыялог. Калі вы ствараеце меню, вы можаце сфакусаваць першы пункт меню.

 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 і іншая падтрымка даступнасці

Гэты адказ, спадзяюся, ахоплівае асновы даступнай падтрымкі клавіятуры і мышы для гэтай функцыі, але паколькі ён ужо даволі значны, я збіраюся пазбягаць абмеркавання роляў і атрыбутаў WAI-ARIA , аднак я настойліва рэкамендую, каб распрацоўшчыкі спасылаліся на спецыфікацыю для падрабязнасьцяў пра тое, якія ролі яны павінны выкарыстоўваць, і любых іншых адпаведных атрыбутах.

220
12 июля '16 в 2:29 2016-07-12 02:29 адказ дадзены zzzzBov 12 ліпеня '16 у 2:29 2016/07/12 02:29

Іншыя рашэнні тут не працавалі для мяне, таму я павінен быў выкарыстаць:

 if(!$(event.target).is('#foo')) { // hide menu } 
132
07 июля '09 в 2:10 2009-07-07 02:10 адказ дадзены Dennis 07 ліпеня '09 ў 02:10 2009-07-07 02:10

У мяне ёсць дадатак, якое працуе аналагічна прыкладу Eran, за выключэннем таго, што я прымацоўваюць падзея click да цела пры адкрыцці меню ... Kinda накшталт гэтага:

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

Дадатковая інфармацыя аб Jquery one() функцыя

122
30 сент. адказ дадзены Joe Lencioni 30 сент. 2008-09-30 21:13 '08 у 21:13 2008-09-30 21:13
 $("#menuscontainer").click(function() { $(this).focus(); }); $("#menuscontainer").blur(function(){ $(this).hide(); }); 

Працуе для мяне проста выдатна.

36
17 нояб. адказ дадзены user212621 17 лістапада. 2009-11-17 09:13 '09 у 9:13 2009-11-17 09:13

Зараз для гэтага ёсць убудова: вонкавыя падзеі ( паведамленне ў блогу )

Наступнае адбываецца, калі апрацоўшчык clickoutside (WLOG) прывязаны да элемента:

  • элемент дадаецца ў масіў, які змяшчае ўсе элементы з апрацоўшчык clickoutside.
  • a ( namespaced ) апрацоўшчык кліка прывязаны да дакумента (калі ён яшчэ не існуе)
  • пры любым пстрычцы ў дакуменце падзея clickoutside запускаецца для тых элементаў у гэтым масіве, якія не роўныя або бацькоўскі аб'ект мэты-кліку
  • Акрамя таго, event.target для падзеі clickoutside усталяваны на элемент, на які карыстальнік націснуў (каб вы нават ведалі, што карыстальнік націснуў, а не толькі, што ён пстрыкнуў звонку).

Такім чынам, ніякія падзеі не спыняюцца з-за распаўсюджвання, а дадатковыя апрацоўшчыкі клікаў могуць выкарыстоўвацца "вышэй" з дапамогай вонкавага апрацоўшчыка.

35
05 апр. адказ дадзены Wolfram 05 крас. 2010-04-05 13:07 '10 у 13:07 2010-04-05 13:07

Пасля даследавання я знайшоў тры працоўныя рашэнні (я забыўся спасылкі на старонкі для даведкі)

першае рашэнне

 <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> does not stop event propagation <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> 

другое рашэнне

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

трэцяе рашэнне

 <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 нояб. адказ дадзены Rameez Rami 02 лістапада. 2015-11-02 11:33 '15 у 11:33 2015/11/02 11:33

Гэта спрацавала для мяне выдатна!

 $('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 адказ дадзены srinath 04 чэрвеня '12 у 17:08 2012-06-04 17:08

Я не думаю, што вам сапраўды трэба закрыць меню, калі карыстальнік націскае на яго; вам трэба, каб меню зачынялася, калі карыстальнік націскае на любым месцы на старонцы. Калі вы націснеце на меню або па-за меню, ён павінен закрыць яго прама?

Не знойдучы здавальняючых адказаў, я папрасіў напісаць гэты пост у блогу на днях. Для больш педантычнага, ёсць некалькі памылак, каб прыняць да ведама:

  • Калі вы далучыце апрацоўшчык падзеі кліку да элемента body падчас кліку, абавязкова дачакайцеся другога пстрычкі перад закрыццём меню і Адкасніцеся падзея. У адваротным выпадку падзея кліку, якое адкрыла меню, выйдзе на экран слухача, які павінен закрыць меню.
  • Калі вы выкарыстоўваеце event.stopPropogation () у падзеі кліку, ніякія іншыя элементы на вашай старонцы не могуць мець функцыю click-where-to-close.
  • Прымацаванне апрацоўшчыка падзеі click да элемента body неабмежавана не з'яўляецца эфектыўным рашэннем
  • Параўнанне мэты падзеі і яго бацькоў з стваральнікам апрацоўшчыка мяркуе, што вы хочаце закрыць меню пры націску на яго, калі тое, што вы сапраўды хочаце, гэта закрыць яго, калі вы націскаеце ў любым месцы старонкі.
  • Праслухоўванне падзей на элеменце body зробіць ваш код больш далікатным. Стыль нявінна, як гэта магло б зламаць яго: 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 адказ дадзены 34m0 19 мая '11 у 0:15 2011-05-19 00:15

У якасці іншага плаката сказана, што ёсць шмат памылак, асабліва калі элемент, які вы паказваеце (у дадзеным выпадку меню), мае інтэрактыўныя элементы. Я знайшоў наступны метад досыць надзейным:

 $('#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); } }) }); clicking anywhere outside will close the menu $('#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); } }) }); to check whether user has clicked outside of menu $('#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); } }) }); we can unbind it $('#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 дек. адказ дадзены benb 22 снеж. 2011-12-22 14:59 '11 у 14:59 2011-12-22 14:59

Простым рашэннем сітуацыі з'яўляецца:

 $(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(); } }); the desired div or section $(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 , калі за межы div падзеі пстрычкі спрацоўвае.

Дадатковую інфармацыю вы можаце знайсці ў наступным блогу: http://www.codecanal.com/detect-click-outside-div-using-javascript/

20
15 дек. адказ дадзены Jitendra Damor 15 снеж. 2015-12-15 06:50 '15 у 06:50 2015/12/15 06:50

Праверце мэтавую кропку падзеі пстрычкі акна (ён павінен распаўсюджвацца ў акне, калі ён не быў захоплены нідзе) і пераканайцеся, што ён не з'яўляецца адным з элементаў меню. Калі гэта не так, вы знаходзіцеся па-за сваім меню.

Або праверце становішча пстрычкі і паглядзіце, змяшчаецца ён у галіне меню.

18
30 сент. адказ дадзены Chris MacDonald 30 сент. 2008-09-30 16:20 '08 у 16:20 2008-09-30 16:20

Solution1

Замест выкарыстання event.stopPropagation (), які можа мець некаторыя пабочныя эфекты, проста вызначыце простую зменную сцяга і дадайце адна ўмова if . Я тэставаў гэта і працаваў нармальна без якіх-небудзь пабочных эфектаў stopPropagation:

 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"; } }); should not do any action 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

З дапамогай простага ўмовы if :

 $(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 } }); the container $(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 } }); is outside the element $(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 янв. адказ дадзены Iman Sedighi 28 студз. 2015-01-28 20:24 '15 у 20:24 2015/01/28 20:24

У мяне быў поспех з чымсьці накшталт гэтага:

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

Логіка такая: калі паказаны #menuscontainer , прывяжыце апрацоўшчык клікаў да цела, які хавае #menuscontainer толькі ў тым выпадку, калі мэта (пстрычкі) не з'яўляецца даччыным элементам.

15
02 дек. адказ дадзены Chu Yeow 02 снеж. 2010-12-02 12:53 '10 у 12:53 2010-12-02 00:53

У якасці варыянту:

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

У яго няма праблем з прыпынкам распаўсюджвання падзей і лепш падтрымлівае некалькі меню на той жа старонцы, дзе пстрычка па другім меню пры першым адкрыцці пакіне першае адкрыццё ў вырашэнні stopPropagation.

14
24 июля '14 в 12:41 2014-07-24 12:41 адказ дадзены Bohdan Lyzanets 24 ліпеня '14 ў 12:41 2014/07/24 00:41

Я знайшоў гэты метад у некаторым убудове календара jQuery.

 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 адказ дадзены nazar kuliyev 28 ліпеня '11 ў 17:06 2011-07-28 17:06

Вось рашэнне для ванільнага JavaScript для будучых гледачоў.

Пры пстрычцы па любому элементу ўнутры дакумента, калі пстрыкнуў ідэнтыфікатар элемента clicked, або схаваны элемент не скрыты, а схаваны элемент не ўтрымлівае элемент з пстрычкай, пераключыце элемент.

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

Калі вы збіраецеся мець некалькі перамыкачоў на адной старонцы, вы можаце выкарыстоўваць нешта накшталт гэтага:

  • Дадаць імя класа hidden ў складаны элемент.
  • Пры пстрычцы дакумента зачыніце ўсе скрытыя элементы, якія не ўтрымліваюць элемент з клікам і ня схаваныя.
  • Калі пстрыкнуць элемент з'яўляецца перамыкачом, пераключыце ўказаны элемент.

10
20 мая '15 в 1:52 2015-05-20 01:52 адказ дадзены Tiny Giant 20 мая '15 у 01:52 2015/05/20 01:52

Падзея мае ўласцівасць, званае event.path элемента, які з'яўляецца "статычным спарадкаваны спісам усіх яго продкаў у парадку дрэва". Каб праверыць, ці адбылося падзея з пэўнага элемента DOM або аднаго з яго даччыных элементаў, проста праверце шлях да гэтага канкрэтнаму элементу DOM. Ён таксама можа выкарыстоўвацца для праверкі некалькіх элементаў лагічна OR пры праверцы элемента ў функцыі some .

 #main { display: inline-block; } 
var _tmr = window._tmr || (window._tmr = []);_tmr.push({id: "2334768", type: "pageView", start: (new Date()).getTime()});(function (d, w, id) {  if (d.getElementById(id)) return;  var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;  ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";  var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};  if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }})(document, window, "topmailru-code");