Форум

SilentChild · #1 (**permalink**) 04.10.2011, 23:13

Здравствуйте, уважаемые программисты!

Ближе к делу:
У меня есть список 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>

ksa · #2 (**permalink**) 05.10.2011, 16:06

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript