Правильное всплытие события (делегирование)
здравствуйте, дорогие форумчане!
есть вопрос. не могу "добраться" до div'a по клику. когда data-property установлен на ul, все работает хорошо. а когда вешаю атрибут на div: <div data-property='yes'> <ul>#event <li>"new"</li> <li>"fuck"</li> <li>"there"</li> <li>"death"</li> <li>"new"</li> <li>"new"</li> <li>"oo"</li> </ul> </div> не получается ничего. через console.log(target) вижу в только ul и li, которые расположены внутри div, то есть "сверху". как заставить JS target'ом захватить div искать по всем родительским узлам пока не найдется data-property не хочется. есть ли более элегантное решение? код JS такой:
(function() {
var app = {
initialise: function () {
this.modules();
this.setUpListeners();
},
modules: function () {
},
setUpListeners: function () {
document.addEventListener('click', this.firstAction, false);
},
firstAction: function (e) {
//event.preventDefault(event);
e = e || window.e;
var target = e.target || e.srcElement;
var yourData = target.getAttribute('data-property');
if (yourData) alert('yes, baby, yes');
}
};
app.initialise();
}());
спасибо! :) |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
ul {
padding: 10px;
border: 1px solid;
}
li {
margin: 10px;
border: 1px solid;
}
</style>
<script type='text/javascript'>
window.onload=function (){
document.addEventListener('click', function (e) {
e = e || window.e;
var target = e.target || e.srcElement;
var data;
if (target.className=='one') {data=target.parentNode};
if (target.className=='two') {data=target.parentNode.parentNode};
if (data) {
alert(data.getAttribute('data-property'));
};
}, false);
};
</script>
</head>
<body>
<div id='test' data-property='yes'>
<ul class='one'>
<li class='two'>"new"</li>
<li class='two'>"fuck"</li>
<li class='two'>"there"</li>
<li class='two'>"death"</li>
<li class='two'>"new"</li>
<li class='two'>"new"</li>
<li class='two'>"oo"</li>
</ul>
</div>
</body>
</html>
|
ksa, спасибо за вариант, но, фактически, это и есть старый добрый перебор родителей вверх по дереву.
anyway, спасибо за совет ) |
вобщем, пришлось дедовским способом делать - через логическое или.
(function() {
var targeter = function (e) {
e = e || window.e;
var target = e.target || e.srcElement;
if (target.nodeName === 'HTML') return false; // aviod error
var data = target.getAttribute('data-property') || target.parentNode.getAttribute('data-property') || target.parentNode.parentNode.getAttribute('data-property');
if (data) console.log('yes, baby, yes');
}
document.addEventListener('click', targeter, false);
}());
|
| Часовой пояс GMT +3, время: 02:39. |