Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Событие должно наступать только при покидании div / 11 сообщений из 11, страница 1 из 1
28.05.2015, 19:22
    #38971180
Rastrapovich
Rastrapovich
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
Имеем:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<html>
<head>
<script type="text/javascript">
window.onload = function() {

	document.getElementById("divid").onmouseout = function boo() {
		alert("Boo!");
	}
	
}
</script>
</head>
<body>

<div id="divid" style="width:200px;height:200px;background:yellow;padding:20px;">

	<span>one</span>&nbsp;&nbsp;&nbsp;<span>two</span>

</div>

</body>
</html>


Проблема в том, что событие наступает не только когда курсор уходит с <div>, но и когда он заходит на <span>.
Как сделать так, чтобы <span> считался частью <div>?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2015, 19:59
    #38971199
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
cancelBubble
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2015, 21:54
    #38971263
Rastrapovich
Rastrapovich
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
Я, наверное, что-то догоняю, но не работает...
Мне нужно, чтобы при заходе на спаны "Бу! не появлялась.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<html>
<head>
</head>
<body>

<div onmouseout="alert('Boo!');" id="divid" style="width:200px;height:200px;background:yellow;padding:20px;">

	<span onmouseout="event.cancelBubble=true;">one</span>&nbsp;&nbsp;&nbsp;<span onmouseout="event.cancelBubble=true;">two</span>

</div>

</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2015, 01:48
    #38971369
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
Так вроде...
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
window.onload = function() {

	document.getElementById("divid").onmouseout = function (event) {//boo тут не нужно
		alert("Boo!");
                event.cancelBubble=true;

	}
	
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2015, 11:11
    #38971627
Rastrapovich
Rastrapovich
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
Если я правильно понял, то cancelBubble нужна для того, чтобы при одинаковом событии функция не срабатывала на вложенных элементах. Но это не мой случай.

Когда я навожу курсор на <span>, браузер считает, что я ушёл с <div> и показывает мне "Бу!".

Мне нужно, чтобы "Бу!" показывалось ТОЛЬКО когда я ухожу с дива вообще, а не когда захожу на <span>.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2015, 12:14
    #38971695
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
RastrapovichМне нужно, чтобы "Бу!" показывалось ТОЛЬКО когда я ухожу с дива вообще, а не когда захожу на <span>.Тогда проверяй по цепочке parentNode до tagName == "body". Или BODY, запамятовал. Если одним из parentNode окажется твой див - не показывай бу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2015, 12:16
    #38971698
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
Начинать нужно с event.targetElement || event.srcElement (для ie)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2015, 14:32
    #38971876
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
интересная тема, похожа на мой старый вопрос , но гораздо сложнее.... Я нашел в гугле решение, оно работает, но как - я сам не понял
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html>
<head>
<style>
#divid {
  width:200px; height:200px;
  background:#87CEFA;
  padding:20px;
}
#divid span {background:#FFFACD;}
</style>
</head>
<body>
<div id="divid">
  <span>one</span> &nbsp; &nbsp; <span>two</span>
</div>

<script>
var myDiv = document.getElementById('divid');
myDiv.addEventListener('mouseover', mouseEnter(divHover), true);
myDiv.addEventListener('mouseout', mouseEnter(divOut), true);

function divHover() {console.log('div hover');}
function divOut() {console.log('div exit');}
function mouseEnter(_fn) {
  return function(_evt) {
    var relTarget = _evt.relatedTarget;
    if (this === relTarget || isAChildOf(this, relTarget)) {return;}
    _fn.call(this, _evt);
  }
}
function isAChildOf(_parent, _child) {
  if (_parent === _child) {return false;}
  while (_child && _child !== _parent)
  { _child = _child.parentNode; }
  return _child === _parent;
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.05.2015, 14:36
    #38971885
Rastrapovich
Rastrapovich
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
Спасибо за идею, Antonariy ! Сделал:

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<html>
<head>
<script type="text/javascript">
window.onload = function() {

	document.getElementById("divid").onmouseout = function follow(event) {

		((event.target.tagName == "DIV") && (event.relatedTarget.tagName == "BODY")) ? alert('Boo!') : "";

	}

}
</script>
</head>
<body style="width:100%;height:100%;margin:0;">
<div id="divid" style="width:200px;height:200px;background:yellow;padding:20px;">

	<span>one</span>&nbsp;&nbsp;&nbsp;<span>two</span>

</div>

</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.05.2015, 06:38
    #38972274
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
Полезно читать учебник:
http://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.05.2015, 00:17
    #38972532
Rastrapovich
Rastrapovich
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Событие должно наступать только при покидании div
skyANAПолезно читать учебник:
http://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave
+1!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Событие должно наступать только при покидании div / 11 сообщений из 11, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 330ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445987]:
 0ms
get settings:
 5ms
get forum list:
 14ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 30ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 54ms
get tp. blocked users:
 1ms
others: 206ms
total:  330ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]