ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Событие должно наступать только при покидании div
11 сообщений из 11, страница 1 из 1
Событие должно наступать только при покидании div
    #38971180
Rastrapovich
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Rastrapovich
Гость
Имеем:
Код: 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:22
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38971199
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
cancelBubble
...
Рейтинг: 0 / 0
28.05.2015, 19:59
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38971263
Rastrapovich
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Rastrapovich
Гость
Я, наверное, что-то догоняю, но не работает...
Мне нужно, чтобы при заходе на спаны "Бу! не появлялась.
Код: 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
28.05.2015, 21:54
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38971369
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Так вроде...
Код: 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, 01:48
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38971627
Rastrapovich
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Rastrapovich
Гость
Если я правильно понял, то cancelBubble нужна для того, чтобы при одинаковом событии функция не срабатывала на вложенных элементах. Но это не мой случай.

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

Мне нужно, чтобы "Бу!" показывалось ТОЛЬКО когда я ухожу с дива вообще, а не когда захожу на <span>.
...
Рейтинг: 0 / 0
29.05.2015, 11:11
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38971695
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
RastrapovichМне нужно, чтобы "Бу!" показывалось ТОЛЬКО когда я ухожу с дива вообще, а не когда захожу на <span>.Тогда проверяй по цепочке parentNode до tagName == "body". Или BODY, запамятовал. Если одним из parentNode окажется твой див - не показывай бу.
...
Рейтинг: 0 / 0
29.05.2015, 12:14
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38971698
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Начинать нужно с event.targetElement || event.srcElement (для ie)
...
Рейтинг: 0 / 0
29.05.2015, 12:16
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38971876
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
интересная тема, похожа на мой старый вопрос , но гораздо сложнее.... Я нашел в гугле решение, оно работает, но как - я сам не понял
Код: 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:32
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38971885
Rastrapovich
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Rastrapovich
Гость
Спасибо за идею, 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
29.05.2015, 14:36
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38972274
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Полезно читать учебник:
http://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave
...
Рейтинг: 0 / 0
30.05.2015, 06:38
| Ответить | Цитировать | Написать  
Событие должно наступать только при покидании div
    #38972532
Rastrapovich
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Rastrapovich
Гость
skyANAПолезно читать учебник:
http://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave
+1!
...
Рейтинг: 0 / 0
31.05.2015, 00:17
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Событие должно наступать только при покидании div
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38971199&tid=1445987]:
 0ms
get settings:
 5ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 145ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 64ms
get tp. blocked users:
 1ms
others: 202ms
total:  450ms
созд. / загр.: 450ms
x
x
Закрыть


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