Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   С какой стороны заходит мышь! (https://javascript.ru/forum/events/24968-s-kakojj-storony-zakhodit-mysh.html)

KupueIIIKo 20.01.2012 16:21

С какой стороны заходит мышь!
 
Есть мануал или примеры чтоб определить с какой стороны наводится мышь в div! То есть слева, справа или сверху?

dmitriymar 20.01.2012 17:27

отслеживая координаты мыши при событии onmouseover и изменение их при последующем движении её над контейнером .
какие мануалы? какие примеры на "5 строк" кода?

KupueIIIKo 20.01.2012 17:42

Без координат ни как?

dmitriymar 20.01.2012 17:46

Цитата:

Сообщение от KupueIIIKo
Без координат ни как?

ну расположи сверху каждой из 4х сторон дива по контейнеру с 1 пиксельной шириной. при событии маусовер у любого из них можно определить с какой стороны вход был

Маэстро 20.01.2012 20:15

Цитата:

Сообщение от dmitriymar (Сообщение 151710)
ну расположи сверху каждой из 4х сторон дива по контейнеру с 1 пиксельной шириной. при событии маусовер у любого из них можно определить с какой стороны вход был

-плохо. при быстром движении мыши "маусовер" на однопиксельном диве может не возникнуть.

dmitriymar 20.01.2012 20:35

Цитата:

Сообщение от Маэстро
-плохо. при быстром движении мыши "маусовер" на однопиксельном диве может не возникнуть.

какое отношение имеет возникновение события к отслеживанию координат курсора?
боюсь что возникнет в любом случае. а то что не возникнет -это связанно с "провалом события" и имеет своё лечение.

Pavel M. 21.01.2012 11:03

попробовал на jquery сделать
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>

	<script>
	$(function(){
		$('div').mouseenter(function (e) {
			var jEl = $(this),
				w = jEl.outerWidth(),
				h = jEl.outerHeight(),
				off = jEl.offset(),
				x = e.pageX - off.left,
				y = e.pageY - off.top,
				xShift, // сдвиг от правой или левой границы
				yShift, // сдвиг от верхней или нижней границы
				xText,
				yText,
				itogText;

			if (x / w > .5) {
				xShift = w - x;
				xText = 'справа';
			} else {
				xShift = x;
				xText = 'слева';
			}
			
			if (y / h > .5) {
				yShift = h - y;
				yText = 'снизу';
			} else {
				yShift = y;
				yText = 'сверху';
			}
			
			itogText = (xShift < yShift) ? xText : yText;
		   
			jEl.text(itogText);
		});
	});  

	</script>
</head>
<body>
	<div style="width: 100px; height: 100px; padding: 20px; margin: 20px; background: red;"></div>
</body>
</html>

Маэстро 21.01.2012 13:11

Цитата:

Сообщение от dmitriymar (Сообщение 151729)
какое отношение имеет возникновение события к отслеживанию координат курсора?
боюсь что возникнет в любом случае. а то что не возникнет -это связанно с "провалом события" и имеет своё лечение.

-В задаче не было сказано ни слова о координатах. Человеку надо узнать направление, т.е. факт сверху/снизу/слева/справа.
-"провалы" я и имел ввиду.

dmitriymar 21.01.2012 15:00

Цитата:

Сообщение от Маэстро
"провалы" я и имел ввиду.

дак а какое отношение имеют провалы к ширине блока?

Маэстро 23.01.2012 13:31

Цитата:

Сообщение от dmitriymar (Сообщение 151847)
дак а какое отношение имеют провалы к ширине блока?

Событие onmouseover не является гарантированным. При малой ширине блока (1 px) и быстром перемещении мыши оно может не возникнуть.
Для таких целей надо постоянно обрабатывать событие OnMouseMove, вычислять координаты мыши и по двум последним засечкам и определять вектор её перемещения.


Часовой пояс GMT +3, время: 15:18.