setTimeout и event.srcElement
Хочу для обычной вертикальной выпадающей вниз менюшки из списков добавить плавности и задержку перед закрытием. Когда мышку отводим от пункта (onmouseout) - надо проверить куда мы её отвели - на подпункт или нет. Для этого делаю задержку через settimeout, а там уже проверяю где сейчас курсор. Так вот - почему то не выходит ничего. event.srcElement тупо не работает внутри таймера, а document.activelement хоть убей выдаёт боди. Если взять event.srcElement до таймера - то он берет сам пункт с которого мышку увели, а не тот на который навелись.
<body>
<style>
#menu5 {
border: solid 7px black;
border-bottom-color: #e6350c;
border-right-color: #e6350c;
border-left-color:#fb8866;
border-top-color:#fb8866;
width: 180px;
}
#menu5, #menu5 ul{
list-style-type: none;
margin: 0;
padding:0;
}
#menu5 li ul li{
margin: 0;
text-align:left;
}
#menu5 a {display: block; height: 30px; width: 180px; margin: 0px;
background-color:#333;
}
</style>
<ul id="menu5">
<li ><a onmouseover="showli()" onmouseout="b()" id="asdd" href="#">Встречи</a>
<ul onmouseover="a();" onmouseout="b()" >
<li><a id="s1" style="opacity: 0.5; filter: alpha(opacity=50);" href="#">Ссылка 1</a></li>
<li><a style="opacity: 0.5; filter: alpha(opacity=50);" href="#">Ссылка 2</a></li>
</ul></li>
</ul>
<SCRIPT language="javascript">
var hT, sT, a, ids;
function a()
{a=2;}
function x()
{ids=event.srcElement.id;
alert(ids);}
function b() {
setTimeout (function()
{
x();
if (ids=='UL'){ Hide('s1', 0.5);}}
, 1000);
}
function c(){
Hide ('s1', 0.5);}
function showli()
{a=5; Show('s1', 1);}
function Show(objId, x) {
var obj = document.getElementsByTagName("a")[1];
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op < x) {
clearTimeout(hT);
op += 0.1;
for (var i=1; i<3; i++) {
var obj = document.getElementsByTagName("a")[i];
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';}
sT=setTimeout('Show(\''+objId+'\', '+x+')',30);}
}
function Hide(objId, x) {
var obj = document.getElementsByTagName("a")[1];
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op > x) {
clearTimeout(sT);
op -= 0.1;
for (var i=1; i<3; i++) {
var obj = document.getElementsByTagName("a")[i];
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
hT=setTimeout('Hide(\''+objId+'\', '+x+')',30);
}}
}
</SCRIPT>
</body>
|
function a()
{a=2;} После этого функции a не будет. Вы опубликовали очень много кода. Пожалуйста, локализуйте проблему! Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно. И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему. Спасибо.:nono: |
<body>
<style>
#menu5 {
border: solid 7px black;
border-bottom-color: #e6350c;
border-right-color: #e6350c;
border-left-color:#fb8866;
border-top-color:#fb8866;
width: 180px;
}
#menu5, #menu5 ul{
list-style-type: none;
margin: 0;
padding:0;
}
#menu5 li ul li{
margin: 0;
text-align:left;
}
#menu5 a {display: block; height: 30px; width: 180px; margin: 0px;
background-color:#333;
}
</style>
<ul id="menu5">
<li ><a onmouseover="Show('s1', 1)" onmouseout="b()" id="asdd" href="#">Встречи</a>
<ul>
<li><a id="s1" href="#">Ссылка 1</a></li>
</ul></li>
</ul>
<SCRIPT language="javascript">
var ids;
function x()
{ids=event.srcElement.id;
alert(ids);}
function b() {
setTimeout (function()
{
x();
if (ids=='s1'){alert('ok')}}
, 1000);
}
</SCRIPT>
</body>
По коду, надо чтобы когда мы переводим курсор с пункта Встречи на пункт Ссылка 1 нам выдало Id "ссылки 1"(s1) через 1сек. Но event.srcElement.id просто не работает когда вызывается таймером. |
Поставьте дебагер, например firebug для мозилы
|
| Часовой пояс GMT +3, время: 23:55. |