Как можно использовать координаты синтетического события.
Я поразмыслил на досуге и думаю зачем нужны
координаты синтетическому событию ;) , к примеру я создам синтетическое click
evt = document.createEvent('MouseEvent');//событие мыши
evt.initMouseEvent("click", true, true, window, 0, /*До false идут координаты*/0, 0, 0, 0, false, false, false, false, 0, null);//инициализация события
зачем нужны они эти координаты? Недавно я пытался использовать координаты мыши что-бы не использовать distpathEvent на сам элемент, а зная его координаты выполнить на боди оставив событию координаты элемента, к сожалению у меня ничего не вышло - это моя ошибка с координатами или мой замысел можно реализовать (применять синтетическое события на элемент зная его координаты)? ;) Спасибо за любые ответы. |
document.elementFromPoint
|
Раед,
+ я не знал такой метод |
Раед,
не работает :( как им пользоваться? |
Dim@,
Этот метод походу для ИЕ |
Deff,
да, похоже, я его находил на mdsn |
Цитата:
P.S. Ошибся, просто document.elementFromPoint, без get |
Maxmaxmахimus,
По соседним ячейкам таблицы - я могу данным методом кликать ? - не зная их размеров (зная только данную ячейку ? (*Если можно - пример?
<table border='1'><tr>
<td>ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr><td>ячейка 4</td><td id=My bgcolor="red">ячейка 5</td><td>ячейка 6</td>
</tr>
<tr>
<td>ячейка 7</td><td>ячейка 8</td><td>ячейка 9</td>
</tr>
</table>
|
Maxmaxmахimus,
я знаю все про центральную красную ячейку, нун определить её объектное окружение(оно может быть от 0 до 8 ячеек т.е при клике за бордер красной ячейки - я попаду на соседа и смогу считать объект ? (cчитаем что border:collapse |
Цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type">
</head><body>
<table border='1'><tr>
<td>ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr><td>ячейка 4</td><td id=My bgcolor="red">ячейка 5</td><td>ячейка 6</td>
</tr>
<tr>
<td>ячейка 7</td><td>ячейка 8</td><td>ячейка 9</td>
</tr>
</table>
<script type="text/javascript">
var td = document.getElementById('My');
var x = td.getBoundingClientRect().left;
var y = td.getBoundingClientRect().top;
var border = +td.parentNode.parentNode.parentNode.border;
console.log(x, y, border);
var neighbour = document.elementFromPoint(x-border-2, y+2);
alert(neighbour.innerHTML);
</script>
</body></html>
|
Раед,
Пасиб большое! *Только в Ие 8 не работает... жаль нужна кроссбраузерность |
Цитата:
|
Цитата:
|
При использовании document.elementFromPoint мы собственно опять получаем сам элемент (только по координатам), при этом координаты в initMouseEvent никак не влияют на получение результата.
Можно ли всё-таки получить результат именно по координатам в initMouseEvent? Типа как-нибудь так
<body>
<input type="button" value="click" id="but">
<input type="file" id="inp">
<script>
window.onload = function () {
var inp = document.getElementById('inp');
var but = document.getElementById('but');
but.onclick = function () {
var coords = inp.getBoundingClientRect();
var x = coords.left;
var y = coords.top;
var evt = document.createEvent("MouseEvent");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null);
document.body.dispatchEvent(evt);
}
}
</script>
|
bes,
я пробовал, но не ахти :( |
Цитата:
Цитата:
|
bes,
фиг знает, по болшому счету она не нужна ибо не получается ее использовать;) |
bes,
надеюсь что в будущем можно будет использовать эти координаты :) |
Цитата:
|
Они нужны для одной простой цели: быть переданными в объект event.
Если внезапно такое событие вызовет навешенный когда-то обработчик, который работает с координатами клика, то c правильными координатами всё ок, а с нулевми могут вылезти баги. Простой пример:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
body{padding:30px 0}
.tooltiped {border-bottom: 1px dotted #f00;cursor:pointer;margin:40px;}
.tooltiped .tooltip {display:block;position:absolute;top:-9999px;left:-9999px;border: 1px solid #f00;background:#fdd}
.red {border-color: #f00;}
.red .tooltip {border-color: #f00;background: #fdd}
.green {border-color: #0f0;}
.green .tooltip {border-color: #0f0;background: #dfd}
.blue {border-color: #00f;}
.blue .tooltip {border-color: #00f;background: #ddf}
</style>
<title></title>
</head>
<body>
<div class="tooltiped red">Просто пример. Наведите мышь.
<span class="tooltip">Пояснение посясняющее самую суть пояснениея пояснений</span>
</div>
<div class="tooltiped green">Сюда мы скастовали нулевой initMouseEvent.
<span class="tooltip">initMouseEvent("mousemove", true, true, d[1], 0, 0, 0, 0, 0, false, false, false, false, 0, null);</span>
</div>
<div class="tooltiped blue">А сюда c правильно заданными координатами.
<span class="tooltip">initMouseEvent("mousemove", true, true, d[2], 0, 0, 0, 130, 211, false, false, false, false, 0, null);</span>
</div>
<script type="text/javascript">
(function(){
var d=document.getElementsByClassName('tooltiped'), i=d.length,
mousemove = function(e){
var tt = this.children[0].style;
tt.top = e.clientY + 10 + 'px';
tt.left = e.clientX + 10 + 'px';
},
mouseout = function(e){
this.children[0].style.cssText="";
};
while(i--) {
d[i].onmousemove = mousemove;
d[i].onmouseout = mouseout;
}
var e1 = document.createEvent('MouseEvent'), e2 = document.createEvent('MouseEvent');
e1.initMouseEvent("mousemove", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
e2.initMouseEvent("mousemove", true, true, window, 0, 0, 0, 130, 211, false, false, false, false, 0, null);
d[1].dispatchEvent(e1);
d[2].dispatchEvent(e2);
}())
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 10:45. |