непонятное событие
помогите пожалуйста понять почему на этой странице происходит событие onmouseout при перемещении курсора по пунктам меню. в результате меню схлопывается(схлопывание по задумке должно происходить только когда курсор покидает область меню)
вот js-код
Код:
var menu = document.getElementById('left_menu');
var content = document.getElementById('content');
var running = false;
menu.style.left = '-200px';
//
if (document.addEventListener) {
addEvent = function(el, type, handler) {
el.addEventListener(type, handler, false)
};
} else {
addEvent = function(el, type, handler) {
el.attachEvent("on" + type, handler)
};
};
//анимация левого меню - начало
addEvent(menu, "mouseover", function(e) {
if(this.style.left == '-200px'){
var element = this;
var from = -200; // Начальная координата X
var to = 0; // Конечная координата X
var duration = 1000; // Длительность
var start = new Date().getTime(); // Время старта
if(running != true){
running = true;
setTimeout(function() {
var now = (new Date().getTime()) - start; // Текущее время
var progress = now / duration; // Прогресс анимации
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
addEvent(menu, "mouseout", function(e) {
if(this.style.left == '0px'){
var element = this;
var from = 0; // Начальная координата X
var to = -200; // Конечная координата X
var duration = 1000; // Длительность
var start = new Date().getTime(); // Время старта
if(running != true){
running = true;
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if (progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
function delta(progress) {
function d(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11)
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
return 1 - d(1 - progress);
}
//анимация левого меню - конец
var content = document.getElementById('content');
var running = false;
menu.style.left = '-200px';
//
if (document.addEventListener) {
addEvent = function(el, type, handler) {
el.addEventListener(type, handler, false)
};
} else {
addEvent = function(el, type, handler) {
el.attachEvent("on" + type, handler)
};
};
//анимация левого меню - начало
addEvent(menu, "mouseover", function(e) {
if(this.style.left == '-200px'){
var element = this;
var from = -200; // Начальная координата X
var to = 0; // Конечная координата X
var duration = 1000; // Длительность
var start = new Date().getTime(); // Время старта
if(running != true){
running = true;
setTimeout(function() {
var now = (new Date().getTime()) - start; // Текущее время
var progress = now / duration; // Прогресс анимации
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
addEvent(menu, "mouseout", function(e) {
if(this.style.left == '0px'){
var element = this;
var from = 0; // Начальная координата X
var to = -200; // Конечная координата X
var duration = 1000; // Длительность
var start = new Date().getTime(); // Время старта
if(running != true){
running = true;
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if (progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
function delta(progress) {
function d(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11)
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
return 1 - d(1 - progress);
}
//анимация левого меню - конец
Ибо событие всплывает. т.е. mouseOut срабатывает на чем-то внутри элемента, на который навешан слушатель, и оно всплывает вверх. Итог ваш слушатель его тоже ловит.
Это должно помочь
Это должно помочь
хороший тон - выводить сообщение - работает страница или нет
спасибо, но не могли бы вы помочь мне готовым кодом? я не соображу где применить stopPropagation
в то же время я пытаюсь поставить условие в начало обработчика onmouseout следующим образом и как ни странно проблема не решается тоже
готовый код мне очень помог бы разобраться
в то же время я пытаюсь поставить условие в начало обработчика onmouseout следующим образом и как ни странно проблема не решается тоже
Код:
//
var menu = document.getElementById('left_menu');
var content = document.getElementById('content');
var running = false;
menu.style.left = '-200px';
//
if (document.addEventListener) {
addEvent = function(el, type, handler) {
el.addEventListener(type, handler, false)
};
} else {
addEvent = function(el, type, handler) {
el.attachEvent("on" + type, handler)
};
};
//анимация левого меню - начало
addEvent(menu, "mouseover", function(e) {
e = e || window.event;
if(this.style.left == '-200px'){
var element = this;
var from = -200; // Начальная координата X
var to = 0; // Конечная координата X
var duration = 1000; // Длительность
var start = new Date().getTime(); // Время старта
console.log('over');
if(running != true){
running = true;
setTimeout(function() {
var now = (new Date().getTime()) - start; // Текущее время
var progress = now / duration; // Прогресс анимации
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
addEvent(menu, "mouseout", function(e) {
e = e || window.event;
if(this.style.left == '0px' || (e.target.tagName != 'SPAN') || (e.target.tagName != 'A')){
var element = this;
var from = 0; // Начальная координата X
var to = -200; // Конечная координата X
var duration = 1000; // Длительность
var start = new Date().getTime(); // Время старта
console.log('out');
if(running != true){
running = true;
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if (progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
function delta(progress) {
function d(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11)
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
return 1 - d(1 - progress);
}
//анимация левого меню - конец
var menu = document.getElementById('left_menu');
var content = document.getElementById('content');
var running = false;
menu.style.left = '-200px';
//
if (document.addEventListener) {
addEvent = function(el, type, handler) {
el.addEventListener(type, handler, false)
};
} else {
addEvent = function(el, type, handler) {
el.attachEvent("on" + type, handler)
};
};
//анимация левого меню - начало
addEvent(menu, "mouseover", function(e) {
e = e || window.event;
if(this.style.left == '-200px'){
var element = this;
var from = -200; // Начальная координата X
var to = 0; // Конечная координата X
var duration = 1000; // Длительность
var start = new Date().getTime(); // Время старта
console.log('over');
if(running != true){
running = true;
setTimeout(function() {
var now = (new Date().getTime()) - start; // Текущее время
var progress = now / duration; // Прогресс анимации
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
addEvent(menu, "mouseout", function(e) {
e = e || window.event;
if(this.style.left == '0px' || (e.target.tagName != 'SPAN') || (e.target.tagName != 'A')){
var element = this;
var from = 0; // Начальная координата X
var to = -200; // Конечная координата X
var duration = 1000; // Длительность
var start = new Date().getTime(); // Время старта
console.log('out');
if(running != true){
running = true;
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if (progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
function delta(progress) {
function d(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11)
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
return 1 - d(1 - progress);
}
//анимация левого меню - конец
Код:
var menu = document.getElementById('left_menu');
var content = document.getElementById('content');
var running = false;
menu.style.left = '-200px';
if (document.addEventListener)
{
addEvent = function(el, type, handler)
{
el.addEventListener(type, handler, false)
};
}
else
{
addEvent = function(el, type, handler)
{
el.attachEvent("on" + type, handler)
};
};
// анимация левого меню - начало
addEvent(menu, "mouseover", function(e)
{
if(this.style.left == '-200px')
{
var element = this;
// Начальная координата X
var from = -200;
// Конечная координата X
var to = 0;
// Длительность
var duration = 1000;
// Время старта
var start = new Date().getTime();
if(running != true)
{
running = true;
setTimeout(function()
{
// Текущее время
var now = (new Date().getTime()) - start;
// Прогресс анимации
var progress = now / duration;
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
// Если анимация не закончилась, продолжаем
if(progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
addEvent(menu, "mouseout", function(e)
{
var x = e.relatedTarget || e.toElement;
while(x && x !== menu)
x = x.parentNode;
if(x === menu)
return;
if(this.style.left == '0px')
{
var element = this;
// Начальная координата X
var from = 0;
// Конечная координата X
var to = -200;
// Длительность
var duration = 1000;
// Время старта
var start = new Date().getTime();
if(running != true)
{
running = true;
setTimeout(function()
{
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if(progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
function delta(progress)
{
function d(progress)
{
for(var a = 0, b = 1, result; 1; a += b, b /= 2)
{
if (progress >= (7 - 4 * a) / 11)
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
return 1 - d(1 - progress);
}
var content = document.getElementById('content');
var running = false;
menu.style.left = '-200px';
if (document.addEventListener)
{
addEvent = function(el, type, handler)
{
el.addEventListener(type, handler, false)
};
}
else
{
addEvent = function(el, type, handler)
{
el.attachEvent("on" + type, handler)
};
};
// анимация левого меню - начало
addEvent(menu, "mouseover", function(e)
{
if(this.style.left == '-200px')
{
var element = this;
// Начальная координата X
var from = -200;
// Конечная координата X
var to = 0;
// Длительность
var duration = 1000;
// Время старта
var start = new Date().getTime();
if(running != true)
{
running = true;
setTimeout(function()
{
// Текущее время
var now = (new Date().getTime()) - start;
// Прогресс анимации
var progress = now / duration;
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
// Если анимация не закончилась, продолжаем
if(progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
addEvent(menu, "mouseout", function(e)
{
var x = e.relatedTarget || e.toElement;
while(x && x !== menu)
x = x.parentNode;
if(x === menu)
return;
if(this.style.left == '0px')
{
var element = this;
// Начальная координата X
var from = 0;
// Конечная координата X
var to = -200;
// Длительность
var duration = 1000;
// Время старта
var start = new Date().getTime();
if(running != true)
{
running = true;
setTimeout(function()
{
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);
element.style.left = result + "px";
if(progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
running = false;
}
}
});
function delta(progress)
{
function d(progress)
{
for(var a = 0, b = 1, result; 1; a += b, b /= 2)
{
if (progress >= (7 - 4 * a) / 11)
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
return 1 - d(1 - progress);
}
Да, кроме того, если убрать курсор с области меню во время анимации, то оно так и останется висеть. Надо как-то в любом случае проигрывать анимацию закрытия.