Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.10.2011, 23:13
Новичок на форуме
Отправить личное сообщение для SilentChild Посмотреть профиль Найти все сообщения от SilentChild
 
Регистрация: 04.10.2011
Сообщений: 1

Событие "наведение курсора мыши на элемент"
Здравствуйте, уважаемые программисты!

Ближе к делу:
У меня есть список UL состоящий из одного Li. В Li содержится ссылка а. Ниже всего этого находится таблица.
Задумка такова... когда навожу курсор мыши на Li, то таблица увеличивает свою высоту. Проблема в том, что когда перехожу на ссылку a, то снова начинается выполнение обработчика события. Мне надо, чтобы обработчик события не выполнялся снова, когда я перемещаю курсор на ссылку. Т.е. мне нужно чтобы на событие не влияло перемещение курсора на ссылку.

<html> 
<head>  
<style> 
ul.menu { 
    list-style:none; 
    display:block; 
    background-color:blue; 
    width:500px;     
} 
ul.menu li {     
    background-color:#eeffcc;         
    border:1px solid; 
    width:200px;     
    height:50px; 
    align:center; 
    margin-top:40px; 
} 
ul.menu li a { 
     
    margin-left:10px; 
    padding:0px;     
    border-style:solid; 
    border-width:1px; 
    border-color:black; 
    background-color:blue; 
    color:white; 
} 
</style> 
</head>  
<body>  

<ul id="menu" class="menu"> 
  <li><a href="#">menu 1</a></li>   
</ul>  

<table border=1> 
  <tr> 
    <td>&nbsp;</td></tr> 
</table>


<script type="text/javascript"> 
var In; 
function func1() 
{ 
    var tab = document.getElementsByTagName('table')[0]; 
    tab.style.height = (parseInt(tab.style.height) + 2) + "px"; 
    if (parseInt(tab.style.height) >= 200) { 
        tab.style.height = "200px"; 
        clearInterval(In); 
    } 
} 
function func()  
{     
    var tab = document.getElementsByTagName('table')[0]; 
    tab.style.height = "10px";   
    In = setInterval("func1()", 10); 
} 
var li = document.getElementById('menu').getElementsByTagName('li')[0]; 
li.onmouseover = new Function("func();"); 
</script>


</body>  
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 05.10.2011, 16:06
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от SilentChild
мне нужно чтобы на событие не влияло перемещение курсора на ссылку
Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
ul.menu { 
    list-style:none; 
    display:block; 
    background-color:blue; 
    width:500px;     
} 
ul.menu li {     
    background-color:#eeffcc;         
    border:1px solid; 
    width:200px;     
    height:50px; 
    align:center; 
    margin-top:40px; 
} 
ul.menu li a { 
     
    margin-left:10px; 
    padding:0px;     
    border-style:solid; 
    border-width:1px; 
    border-color:black; 
    background-color:blue; 
    color:white; 
} 
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul id="menu" class="menu"> 
  <li><a href="#">menu 1</a></li>   
</ul>  
<table border=1> 
  <tr> 
    <td>&nbsp;</td></tr> 
</table>
<script type="text/javascript"> 
var In; 
function func1() 
{ 
    var tab = document.getElementsByTagName('table')[0]; 
    tab.style.height = (parseInt(tab.style.height) + 2) + "px"; 
    if (parseInt(tab.style.height) >= 200) { 
        tab.style.height = "200px"; 
        clearInterval(In); 
    } 
} 
function func(e)  
{     
	e = e || window.event
	var o=e.target||e.srcElement
	if (o.tagName=='A') return
    var tab = document.getElementsByTagName('table')[0]; 
    tab.style.height = "10px";   
    In = setInterval("func1()", 10); 
} 
var li = document.getElementById('menu').getElementsByTagName('li')[0]; 
li.onmouseover = function(e){func(e)}; 
</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 22:07
Событие движения мыши GLeBaTi Events/DOM/Window 8 02.03.2011 16:01
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Как имитировать событие мыши Andrey_V Общие вопросы Javascript 4 10.11.2008 16:39