События по-прежнему запускаются детьми, несмотря на stopPropagation () и cancelBubble - PullRequest
Новая
       18

События по-прежнему запускаются детьми, несмотря на stopPropagation () и cancelBubble

1 голос
/ 18 июля 2011

У меня есть элемент (содержащий заголовок моей страницы), который имеет событие onmouseover, которое превращает заголовок в меню. У него также есть событие onmouseout, которое делает обратное. Само меню представляет собой просто набор ссылок и изображений. Когда мышь входит в, она исчезает так же, как и ожидалось. Однако, когда я перемещаю мышь между элементами внутри <div>, событие onmouseout запускается элементом, который я покидаю, после чего следует событие onmouseover элемента, который я ввожу. Я пытался остановить это с помощью stopPropagation и cancelBubble, но безрезультатно. Вот соответствующий код:

Javascript (хранится в menu.js): 

//These two functions are for rendering the menu. 
//Fade is a function that fades an element out or in by 
//changing the opacity of the element.

function renderHeader() {
fade('menu');
setTimeout("document.getElementById('menu').innerHTML=\
\"<img src='menu_1.png' width=20% /><img src='menu_2.png' width=20% />\
<img src='menu_3.png' width=20% /><img src='menu_4.png' width=20% />\
<img src='menu_5.png' width=20% />\"",TimeToFade+33);
setTimeout("fade('menu')",TimeToFade+66);
}

function renderMenu() {
fade('menu');
setTimeout("document.getElementById('menu').innerHTML=\
\"<a href='home.asp'><img src='menu_a.png' width=20% /></a>\
<a href='members.asp'><img src='menu_b.png' width=20% /></a>\
<a href='locations.asp'><img src='menu_c.png' width=20% /></a>\
<a href='about.asp'><img src='menu_d.png' width=20% /></a>\
<a href='services.asp'><img src='menu_e.png' width=20% /></a>\"",TimeToFade+33);
setTimeout("fade('menu')",TimeToFade+66);
}


//These two functions are responsible for stopping the propagation.
function load() {
  element = document.getElementById("menu");
  element.addEventListener("mouseover", stopEvent, false);
  element.addEventListener("mouseout", stopEvent, false);
}

function stopEvent(ev) {
  if (!ev) var ev = window.event;
  ev.cancelBubble = true;
  if (ev.stopPropagation) ev.stopPropagation();
}

HTML (элемент изначально показывает заголовок): 

<head>
...
<script type="text/javascript" src="Scripts/menu.js"></script>
</head>

<body onload="load();">
<div id='menu' style="opacity:1;filter:alpha(opacity=100);height:150px"
onmouseover="renderMenu()" onmouseout="renderHeader()">
<img src='menu_1.png' width=20% /><img src='menu_2.png' width=20% />
<img src='menu_3.png' width=20% /><img src='menu_4.png' width=20% />
<img src='menu_5.png' width=20% /></div>

Ответы [ 2 ]

0 голосов
/ 19 июля 2011

Проблема в том, что вы подключаете обработчик только к внешнему элементу «меню».Тот факт, что его обработчик отменяет распространение, не имеет значения;к тому времени уже слишком поздно.

Вместо этого вы можете проверить свойство "target" события и отвечать только тогда, когда это правильный элемент.

0 голосов
/ 19 июля 2011

stopPropagation () может отменить Bubble () прекратить пузыриться, от потомков до предков, не пузыриться вниз, так как пузырение никогда не начинается с самого начала. Это событие mouseover и mouseout для элементов внутри вашего меню, которые в конечном итоге всплывают до вашего элемента меню. Я думаю, что-то вроде этого может работать для вас: 

function load() {
  elements = document.getElementById("menu").getElementsByTagName('*');
  elements.addEventListener("mouseover", stopEvent, false);
  elements.addEventListener("mouseout", stopEvent, false);
}

Кроме того, вы не должны использовать строки в вашем setTimeout. Ваши строки получают eval () d, что очень медленно по сравнению с просто передачей функции. Особенно длинная нить, как у некоторых из вас. Вы хотите: 

function renderHeader() {
fade('menu');
setTimeout(function(){ document.getElementById('menu').innerHTML=\
"<img src='menu_1.png' width=20% /><img src='menu_2.png' width=20% />\
<img src='menu_3.png' width=20% /><img src='menu_4.png' width=20% />\
<img src='menu_5.png' width=20% />"; },TimeToFade+33);
setTimeout(function(){ fade('menu'); },TimeToFade+66);
}

function renderMenu() {
fade('menu');
setTimeout(function(){ document.getElementById('menu').innerHTML=\
"<a href='home.asp'><img src='menu_a.png' width=20% /></a>\
<a href='members.asp'><img src='menu_b.png' width=20% /></a>\
<a href='locations.asp'><img src='menu_c.png' width=20% /></a>\
<a href='about.asp'><img src='menu_d.png' width=20% /></a>\
<a href='services.asp'><img src='menu_e.png' width=20% /></a>"; },TimeToFade+33);
setTimeout(function(){ fade('menu'); },TimeToFade+66);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...