Форум

brokenwind · #1 (**permalink**) 14.04.2014, 00:39

здравствуйте, дорогие форумчане!

есть вопрос. не могу "добраться" до 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();
 
}());

спасибо!

ksa · #2 (**permalink**) 14.04.2014, 09:38

Сообщение от brokenwind

как заставить JS target'ом захватить div

Как вариант...

<!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>

brokenwind · #3 (**permalink**) 15.04.2014, 03:06

ksa, спасибо за вариант, но, фактически, это и есть старый добрый перебор родителей вверх по дереву.

anyway, спасибо за совет )

brokenwind · #4 (**permalink**) 15.04.2014, 03:35

вобщем, пришлось дедовским способом делать - через логическое или.

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

Форум

Справочник

Discord чат

Курсы javascript