Форум Сайтостроение Веб-строительство

Обработка onMouseOut

12
[Удален]
1200

В общем есть div, в нем например пара <a>

На див прописан onMouseOut='$(this).hide()'

Вопрос - как сделать так чтобы это событие не срабатывало при наведении на ссылки ВНУТРИ дива?

[Удален]
#1

а как оно тогда будет )) если ты прячешь слой то всё что в нем тоже спрячется )))

если только поизголяться и прописать к ссылкам onMouseOut='$(this).unhide()' хотя не сработает скорее всего так как они будут скрыты уже при наведении на слой ) Хотя чёрт знает )

лучше юзай innerHTML

[Удален]
#2

Неееее, ты не понял.

Мне как раз и не нужно прятать элемент пока курсор внутри него. Но onMouseOut срабатывает когда я навожу на любые дочерние элементы внутри дива к которому обработчик привязан

webcat
На сайте с 19.10.2005
Offline
137
webcat
#3

neolord - учите просто DOM

Тогда поймете как что работает в документе ;)

[Удален]
#4
neolord:
Неееее, ты не понял.
Мне как раз и не нужно прятать элемент пока курсор внутри него. Но onMouseOut срабатывает когда я навожу на любые дочерние элементы внутри дива к которому обработчик привязан

ну выход я думаю только один в твоём варианте, выносить слой и указывать ему позицию через css и zindex )) хотя чёрт его знает, не понял что нужно, если бы показал пример что именно нужно, может там просто замена слоя нужна, кто его знает. Покажи пример хотя бы что у тебя реализовать нужно.

СКОРПИОН
На сайте с 05.01.2006
Offline
120
СКОРПИОН
#5

neolord, общий обработчик onMouseOut нужно прописать на весь документ, а внутри обработчика проверку на id нужного блока.

Если совсем в лоб, то можно приблизительно так: 


<!--

var App = {

  init: function()

  {

    document.body.onmouseout = function(e)

    {

      var trgEv = getTarget(e);

      if(trgEv)

      {

        if(trgEv.id && trgEv.id == 'id блока')

          document.getElementById(trgEv.id).style.display = 'none';

      }

      return true;

    }

  }

}



function getTarget(e)

{

  evt = e || window.event;

  return(evt.target || evt.srcElement);

}



window.onload=App.init;

-->

Скрипт в js-файл. Файл подключаем к документу в секции <HEAD>.

З.Ы.

Совет: всегда лучше так делать, а не вешать обработчики прямо внутри HTML.

• Контекстные ссылки с внутренних страниц навсегда (/ru/forum/370882) • Качественные сайты для заработка на контекстной рекламе и ссылках
malls
На сайте с 08.08.2005
Offline
255
malls
#6
webcat:
neolord - учите просто DOM
Тогда поймете как что работает в документе ;)

Не - он prototype и jquery учит - зачем ему DOM!

😂

neolord - второй раз за день уже на эти грабли! А убеждал - FW это добро... :)

Плюнь на них и жизнь станет проще... Вон глянь СКОРПИОН какой красивый кодинг показывает - и все сразу понятно, достаточно только посмотреть. Это не хз что в виде: $(this).hide()

[Удален]
#7
webcat:
neolord - учите просто DOM
Тогда поймете как что работает в документе ;)

Не надо выпендриваться, я знаю что такое дом, и знаю что такое пузырьковая обработка событий, и что такое event capture я тоже знаю, только вот вопроса это не снимает.

KosoyRoman:
ну выход я думаю только один в твоём варианте, выносить слой и указывать ему позицию через css и zindex )) хотя чёрт его знает, не понял что нужно, если бы показал пример что именно нужно, может там просто замена слоя нужна, кто его знает. Покажи пример хотя бы что у тебя реализовать нужно.

Если положить слой с z-index то ссылки не кликабельные будут =)

суть такая


<div id='menu' onmouseout="this.style.display='none'>
<a href='#'>линк</a>
<a href='#'>линк</a>
</div>

Когда я навожу на ссылки - див исчезает. А не должен. Но должен исчезнуть когда я за его пределы выхожу. Теперь суть ясна?

СКОРПИОН:
neolord, общий обработчик onMouseOut нужно прописать на весь документ, а внутри обработчика проверку на id нужного блока.

Если совсем в лоб, то можно приблизительно так:

function getTarget(e)
{
  evt = e || window.event;
  return(evt.target || evt.srcElement);
}

В данном случае этот изврат нужен только для IE, IE мне не нужен. Я в курсе как привязывать прослушку событий, я указал его в коде для понятности и краткости.

Но проблемы это не решает - куда мышь не выводи, что наружу что внутрь, target всегда равен ссылке на див из которого вышла мышка. См. выше на мой ответ Роману.

malls:
Не - он prototype и jquery учит - зачем ему DOM!
😂

neolord - второй раз за день уже на эти грабли! А убеждал - FW это добро... :)
Плюнь на них и жизнь станет проще... Вон глянь СКОРПИОН какой красивый кодинг показывает - и все сразу понятно, достаточно только посмотреть. Это не хз что в виде: $(this).hide()

ФВ здесь совершенно не при чем, DOM структуру узла я чуть ли не на память могу расписать, $(this).hide() Ровно то же самое что this.style.display='none'. Ну хорошо, можно вместо this отсылать к event.target (что на самом деле и делается)

Google: доверие к сайту Digital Caramel - помогаем Вопрос по js, как
malls
На сайте с 08.08.2005
Offline
255
malls
#8
neolord:
знаю что такое пузырьковая обработка событий

Блин если серьезно то я про "пузырьковую обработку" нифига не знаю! Т.е. про "пузырьковую" знаю - это когда пукнешь в лужу, а вот как это событие обрабатывать - ума не приложу... 😂😂😂

neolord по сути - кончай выпендриваться - никто в твоем профессионализме не сомневается. Просто "задвигнутость" на обработках всего и вся через FW реально мешает тебе понять простые ходы для решения простых в принципе задач...

А они есть - поверь! Надо просто забыть про всякую требуху - которая написана исключительно для совсем дебилов, которые ее изучают, не изучив предварительно то на чем она написана.

AD
На сайте с 21.05.2006
Offline
20
Atari [DJEM]
#9

В методе hover jQuery в принципе умеет правильно обрабатывать вложенность обьектов.

Так что можно что-то вроде:

$('#myDivId').hover(function() {}, function() { $(this).hide() });

СКОРПИОН
На сайте с 05.01.2006
Offline
120
СКОРПИОН
#10

neolord, решил я эту задачу, самому интересно стало. Надо не от outa, а от overa плясать (понятно, ведь, почему - в противном случае нарушается событийная модель).

Чуть изменил приведённый ранее пример. Вот рабочий код: 


<!--

var __test = 'onmo';



var App = {

  init: function()

  {

    document.body.onmouseover = function(e)

    {

      var trgEv = getTarget(e);

      if(trgEv)

      {

        if(trgEv.id != __test && trgEv.parentElement.id != __test)

          document.getElementById(__test).style.display = 'none';

      }

      return true;

    }

  }

}



function getTarget(e)

{

  evt = e || window.event;

  return(evt.target || evt.srcElement);

}



window.onload=App.init;

-->

Вот HTML, где действие функции было проверено: 


<html>

<head>

  <style type="text/css">

    body {margin: 0Px; padding: 0Px;}

    #onmo {margin: 50Px; padding: 50Px; width: 500Px; height: 500Px; background: #f00;}

    #onmo a {color: #fff; font: 2em tahoma;}

    #onmo a:hover {color: #000;}

  </style>

  <script type="text/javascript" src="onmo.js"></script>

</head>

<body>

<div id="onmo">

  <a href="">Link 1...</a><br />

  <a href="">Link 2...</a><br />

  <a href="">Link 3...</a><br />

  <a href="">Link 4...</a><br />

  <a href="">Link 5...</a>

</div>

<body>

</html>
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий