Javascript-форум - Как можно использовать координаты синтетического события.

Javascript-форум (https://javascript.ru/forum/)

- Оффтопик (https://javascript.ru/forum/offtopic/)

- - Как можно использовать координаты синтетического события. (https://javascript.ru/forum/offtopic/29816-kak-mozhno-ispolzovat-koordinaty-sinteticheskogo-sobytiya.html)

Раед,
Пасиб большое! *Только в Ие 8 не работает... жаль нужна кроссбраузерность

Цитата:

Сообщение от Раед

Только в Ие 8 не работает

Должно работать, если в код таблицы добавить tbody (ишак его сам не создаёт)

Цитата:

Сообщение от Раед

Должно работать, если в код таблицы добавить tbody

Да -Сенкс, подставил <tbody> - все работает!

При использовании 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,
я пробовал, но не ахти :(

Цитата:

Сообщение от Dim@

bes,
я пробовал, но не ахти

https://developer.mozilla.org/en/DOM...initMouseEvent

Цитата:

event.initMouseEvent(type, canBubble, cancelable, view,
detail, screenX, screenY, clientX, clientY,
ctrlKey, altKey, shiftKey, metaKey,
button, relatedTarget);

clientX
the Event's client x coordinate. Sets the value of event.clientX.
clientY
the Event's client y coordinate. Sets the value of event.clientY.

Вопрос тогда: в каких случаях использовать эту установку координат (мы и так уже всё рассчитали: и элемент получили и его координаты, если по ним элемент получали)?

bes,
фиг знает, по болшому счету она не нужна ибо не получается ее использовать;)

bes,
надеюсь что в будущем можно будет использовать эти координаты :)

Цитата:

Сообщение от Dim@

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>