Форум

Deff · #11 (**permalink**) 16.07.2012, 18:19

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

Раед · #12 (**permalink**) 16.07.2012, 18:35

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

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

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

Deff · #13 (**permalink**) 16.07.2012, 19:03

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

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

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

bes · #14 (**permalink**) 19.07.2012, 13:28

При использовании 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>

Dim@ · #15 (**permalink**) 19.07.2012, 13:30

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

bes · #16 (**permalink**) 19.07.2012, 14:07

Сообщение от 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.

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

Dim@ · #17 (**permalink**) 19.07.2012, 18:59

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

Dim@ · #18 (**permalink**) 19.07.2012, 20:22

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

bes · #19 (**permalink**) 19.07.2012, 21:03

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

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

Да, или подключится тот, кто нам расскажет как их использовать

Aetae · #20 (**permalink**) 20.07.2012, 03:35

Они нужны для одной простой цели: быть переданными в объект 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>

Форум

Справочник

Discord чат

Курсы javascript