Игнорирование дочерних объектов на событие
Добрый день. Столкнулся с не большой проблемой, но решить ее сам так и не смог.
Ситуация следующая: есть меню, при наведении на меню создается <div id='abc'> (принадлежащий body, position absolute), в котором выводим подменю (<ul>...</ul>). Навели мышкой - создался див - показал меню, теперь его нужно закрыть. Закрыть нужно по onmouseout='close(this/this.id)', при условии, если мы вытащим мышку из этого дива 'abc'. Но проблема встает, тогда, когда мы наводим на созданный в этом диве <ul></ul> - блок сразу закрывается (хотя нам нужно этим <ul></ul> пользоваться). Если мышой обходить <ul></ul> внутри созданного дива, а потом выйти мышой из дива - все в порядке, закрывается как и нужно. Но если на вести на <ul> - тут же закрывается. Задача игнорить не нужные события, что находится в этом диве, кроме самого дива. Пробовал следующие и не помогло : функция закрытия дива(abc) { if (<ul>){вернуть фалсе} елсе { закрыть abc; } } <ul onmouseout='return false;'> див.присвоитьДочь(<ul>) z-index:99 / - 99 Думаю, что задача не сложная для того, кто с этим сталкивался! Буду заранее благодарен в помощи. |
function hover (opt) {
opt.elem.onmouseover = ElemMouseAction;
opt.elem.onmouseout = ElemMouseAction;
function ElemMouseAction (evt) {
var related, Call;
var e = evt || event;
if(e.type == 'mouseover'){
Call = opt.over;
related = e.relatedTarget || e.fromElement;
} else {
Call = opt.out;
related = e.relatedTarget || e.toElement;
}
while (related && related != this) {
related = related.parentNode;
}
if(related == this) return;
Call();
}
}
hover({
elem:document.getElementById('#bla'),
over:function () {// срабатывает при mouseover
},
out:function (){// срабатывает при mouseout
}
});
|
Цитата:
Мб я не так, что делаю... если можно коммент напишите на "function hover (opt)" и function ElemMouseAction (evt) без коммента тяжко разобрать |
неужели нет выхода попроще?)
|
функцию писал для себя и поправил интерфейс (упростил) когда заливал на форум, поправил прям в форме коммента, щас гляну где ступил
|
ошибка тут
document.getElementById('#bla') по привычке написал с решеткой (обычно использую querySelectorAll). пример:
<!DOCTYPE HTML>
<html>
<head>
<style>
#bla {
width:200px;
height:200px;
border:5px solid black;
}
</style>
</head>
<body>
<div id='bla'>
</div>
<script>
function hover (opt) {
opt.elem.onmouseover = ElemMouseAction;
opt.elem.onmouseout = ElemMouseAction;
function ElemMouseAction (evt) {
var related, Call;
var e = evt || event;
if(e.type == 'mouseover'){
Call = opt.over;
related = e.relatedTarget || e.fromElement;
} else {
Call = opt.out;
related = e.relatedTarget || e.toElement;
}
while (related && related != this) {
related = related.parentNode;
}
if(related == this) return;
Call();
}
}
hover({
elem:document.getElementById('bla'),
over:function () {// срабатывает при mouseover
alert('over');
},
out:function (){// срабатывает при mouseout
alert('out');
}
});
</script>
</body>
</html>
Цитата:
Цитата:
if(e.type == 'mouseover'){
Call = opt.over;
related = e.relatedTarget || e.fromElement;
} else {
Call = opt.out;
related = e.relatedTarget || e.toElement;
}
просто передаете элемента , и функцию которая выполняется при over и out. |
просто для примера - в итоге я хочу поулчить меню amazon.com , т.е. при наведении (или клике) на меню создается блок с выводом подменю и прочей ерундой (при этом меню в созданном блоке активное), но при выводи мыши из блока - блок удаляется.
|
я даже на джикверный # внимание не обратил... (
|
Цитата:
Цитата:
|
я имел ввиду $('#bla').....
|
Опять трудность, на созданном диве работает. Но у меня див создается при событии, попробуй в свой код, в начало добавь вот это
window.onload = function(){
var div = document.createElement('div');
div.setAttribute('id','bla');
document.body.appendChild(div);
}
и уже не работает... до hover({.... я уже пробовал существование if(document.getElementById('bla')) - не помогло |
как раз у меня поэтому ошибка и вылазила... так как он дива того не видит
|
в jquery уже есть метод hover он встроенный используйте его
|
все работает
<!DOCTYPE HTML>
<html>
<head>
<style>
.d{
width:200px;
height:200px;
border:3px solid black;
}
</style>
</head>
<body>
<a href='#' id='create'>create</a>
<script>
function _(selector) {
return document.querySelectorAll(selector)[0];
}
_('#create').onclick = createElement;
function createElement(){
var div = document.createElement('div');
div.className='d';
document.body.appendChild(div);
hover({
elem:div,
over:function (){
alert('over');
},
out:function () {
alert('out');
}
})
return false;
};
function hover (opt) {
opt.elem.onmouseover = ElemMouseAction;
opt.elem.onmouseout = ElemMouseAction;
function ElemMouseAction (evt) {
var related, Call;
var e = evt || event;
if(e.type == 'mouseover'){
Call = opt.over;
related = e.relatedTarget || e.fromElement;
} else {
Call = opt.out;
related = e.relatedTarget || e.toElement;
}
while (related && related != this) {
related = related.parentNode;
}
if(related == this) return;
Call();
}
}
</script>
</body>
</html>
|
Спасибо огромное за такую помощь!
Все заработало просто я
hover({
elem:document.getElementById('bla'),
over:function () {// срабатывает при mouseover
alert('over');
},
out:function (){// срабатывает при mouseout
alert('out');
}
});
добавил в саму функцию, которая и создает див. Все отлично. Только теперь разберу, что к чему, до конца. Еще раз спасибо!) |
обошелся без jqvery
|
если нужна поддержка ие меньше 8 , функцию
function _(selector) {
return document.querySelectorAll(selector)[0];
}
не используйте |
я думаю, < 8 не будет, спасибо)
|
ну тогда тут описано как работает этот метод http://learn.javascript.ru/searching...electorall-css
|
| Часовой пояс GMT +3, время: 22:29. |