координаты по клику
заметил такую штуку. навешивает событие на элемент. кликаем на дочерний элемент и показываются координаты дочернего элемента
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<link rel="stylesheet" type="text/css" href="lib/font-awesome-4.3.0/css/font-awesome.css">
<style>
.bl1 {
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
}
.bl2 {
width: 70px;
height: 70px;
border: 1px solid black;
position: absolute;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<div class="bl1">
<div class="bl2"></div>
</div>
<script>
document.querySelector('.bl1').onclick = function (e) {
console.log(e);
console.log(e.offsetX);
}
</script>
</body>
</html>
|
Цитата:
http://javascript.ru/tutorial/events...vaniya-sobytiy |
но если мы пропишем console.log(this); то получим именно тот элемент, на который мы навесили событие. а вот координаты показывает другого элемента
|
Цитата:
<!DOCTYPE html>
<html ng-app>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.bl1 {
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
}
.bl2 {
width: 70px;
height: 70px;
border: 1px solid black;
position: absolute;
top: 10px;
left: 50px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="bl1">
<div class="bl2"></div>
</div>
<script>
document.querySelector('.bl1').onclick = function (e) {
o=e.target||window.event.srcElement;
alert('Это элемент '+o.className)
};
</script>
</body>
</html>
Таки событие ссылается на элемент по которому кликнули... |
причем тут target? я про то, что событие навешиваю на один элемент, а данные высвечивает по другому. где логика? если бы мне нужны были координаты внутреннего элемента, я бы навесил обработчик на внутренний элемент. имхо бред
|
А логика в здравом смысле =).
Именно здравый смысл и создал не совсем очевидный для всех механизм всплытия событий в JavaScript. Если вкратце то такой механизм позволят в десятки раз ускорить работу событий в браузере. События всплывают а для тебя это не очевидно =(. |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:13. |