Аналог closest в jQuery
Ребята есть строка
if ( $( event.target ).closest( '.popul' ).length ) return; Вообщем она позволяет отменять закрытие блока при клике на нем, т.е при клике по предкам блока с классом popul. Как будет выглядить аналог на чистом JS? |
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;
|
что-то не так - не работает. что такое matches?
|
Цитата:
|
понятно, но почему-то при клике на обьект с классом .popul, все равно окошко закрывается, у вас работает нормально?
|
Phonixe,
:write: вариант закрытия по клику вне элемента без 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>
|
лучше вот такой регекс:
/(^|\s)popul(\s|$)/ а то, например, "popul-popul" тоже матчится |
чет я не понимаю, чем не устраивает вариант с .matches? Кроссбраузерность? Дык выше по ссылке что я дал, описано как это решить.
|
Цитата:
|
Яростный Меч,
ок |
| Часовой пояс GMT +3, время: 17:35. |