Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2014, 20:27
Интересующийся
Отправить личное сообщение для Phonixe Посмотреть профиль Найти все сообщения от Phonixe
 
Регистрация: 15.01.2014
Сообщений: 19

Аналог closest в jQuery
Ребята есть строка

if ( $( event.target ).closest( '.popul' ).length ) return;

Вообщем она позволяет отменять закрытие блока при клике на нем, т.е при клике по предкам блока с классом popul.

Как будет выглядить аналог на чистом JS?
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2014, 20:52
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

function closest(target, selector) {
  while (target) {
    if (target.matches && target.matches(selector)) return target;
    target = target.parentNode;
  }
  return null;
}

if (closest(event.target, '.popul')) return;
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 04.12.2014 в 20:57.
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2014, 21:19
Интересующийся
Отправить личное сообщение для Phonixe Посмотреть профиль Найти все сообщения от Phonixe
 
Регистрация: 15.01.2014
Сообщений: 19

что-то не так - не работает. что такое matches?
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2014, 21:22
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Phonixe
что такое matches?
https://developer.mozilla.org/en-US/...lement.matches
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2014, 21:32
Интересующийся
Отправить личное сообщение для Phonixe Посмотреть профиль Найти все сообщения от Phonixe
 
Регистрация: 15.01.2014
Сообщений: 19

понятно, но почему-то при клике на обьект с классом .popul, все равно окошко закрывается, у вас работает нормально?
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2014, 22:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Phonixe,
вариант закрытия по клику вне элемента без jQuery
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .popul{
    background-color: #008000;
    width: 150px;
    height: 150px;
  }

  </style>
</head>

<body><div class="nopopul"><h1>This is the element!</h1></div>
<div class="popul"><h1>This is the test!</h1></div>
  <script type="text/javascript">
   var doc = document;
  doc.onclick = function(event) {
      event = event || window.event;
      var target = event.target || event.srcElement;
      while (target != doc) {
          if (/(^|\s)popul(\s|$)/.test(target.className)) {
              return;
          }
          target = target.parentNode;
      }
      document.querySelector('.popul').style.backgroundColor = 'red' //close
  }  </script>
</body>

</html>

Последний раз редактировалось рони, 05.12.2014 в 00:34.
Ответить с цитированием
  #7 (permalink)  
Старый 05.12.2014, 00:11
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

лучше вот такой регекс:
/(^|\s)popul(\s|$)/


а то, например, "popul-popul" тоже матчится
Ответить с цитированием
  #8 (permalink)  
Старый 05.12.2014, 00:19
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

чет я не понимаю, чем не устраивает вариант с .matches? Кроссбраузерность? Дык выше по ссылке что я дал, описано как это решить.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #9 (permalink)  
Старый 05.12.2014, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от devote
Дык выше по ссылке что я дал, описано как это решить.
я непонял как воспользоваться вашим кодом и второе если его надо дополнять полифилом то код стать ещё длиннее и запутанее ... я предложил свой вариант, на сколько хватило моего умения.
Ответить с цитированием
  #10 (permalink)  
Старый 05.12.2014, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Яростный Меч,
ок
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамический подсчет в таблице muraig jQuery 5 11.10.2014 16:54
аналог jQuery prop() infated Элементы интерфейса 7 08.07.2014 14:31
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 23:18
Аналог Jquery slideToggle() Telnet Общие вопросы Javascript 2 24.07.2011 21:25
как сделать аналог jquery.load без jquery? vvsh AJAX и COMET 5 05.06.2009 22:40