Сделал скрипт, а дальше не знаю. - Веб-программирование

Viro_man · 05.08.2008, 19:28

Вот сам код, запустите и проверьте. В общем, ситуация такая, мне надо было разработать обработку событий на мышь, при этом я сделал это так, что div появляется только по истечении определённого времени при нажатой кнопке, в моём случае секунда, если кнопка была отжата раньше этого времени, то ничего не происходит. То есть по сути неплохая замена правой кнопке. Но как теперь сделать, чтобы div исчезал, как только я его покидаю? onmouseout как событие срабатывает даже когда внутри див элемента находишься, но переходишь с сылки на ссылку. И вот хочу вашего совета, как это переделать, лучше не только словами, но и делом, спасибо большое.

Код:

<html>
<head>
<script type="text/javascript">
var mycontent='<table onclick=\"domlay(\'mymenu\',\'0\');\"><tr><td><a href="#">LINK</a></td><td><a href="#">LINK2</a></td></tr></table>';
var timeoutID; var tempevent;

Posx=0; Posy=0;
function checks(e) { if (!e) var e = window.event;
if (e.pageX || e.pageY) { Posx = e.pageX; Posy = e.pageY; }
else if (e.clientX || e.clientY) { Posx = e.clientX; Posy = e.clientY; } }

function varme() { timeoutID=window.setTimeout('mymy()',1000); }

function mymy() { domlay('mymenu','1',Posx,Posy,mycontent); }

function domlay(id,trigger,lax,lay,content) {
if(typeof window.pageXOffset!='undefined') { var posleft=window.pageXOffset; var postop=window.pageYOffset; }
else { var posleft=window.document.body.scrollLeft; var postop=window.document.body.scrollTop; } 
if (trigger=="1") {
	if (document.layers) { document.layers[''+id+''].visibility = "show"; }
	else if (document.all) { document.all[''+id+''].style.visibility = "visible"; }
	else if (document.getElementById) { document.getElementById(''+id+'').style.visibility = "visible"; } }
else if (trigger=="0") {
	if (document.layers) { document.layers[''+id+''].visibility = "hide"; }
	else if (document.all) { document.all[''+id+''].style.visibility = "hidden"; }
	else if (document.getElementById) { document.getElementById(''+id+'').style.visibility = "hidden"; } }	
if (lax){ 
	lax=lax+posleft-5;
	if (document.layers) { document.layers[''+id+''].left = lax; }
	else if (document.all) { document.all[''+id+''].style.left=lax; }
	else if (document.getElementById) { document.getElementById(''+id+'').style.left=lax+"px"; } }
if (lay){ lay=lay+postop-5;
	if (document.layers) { document.layers[''+id+''].top = lay; }
	else if (document.all) { document.all[''+id+''].style.top=lay; }
	else if (document.getElementById) { document.getElementById(''+id+'').style.top=lay+"px"; } }
if (content) {
if (document.layers) {
	sprite=document.layers[''+id+''].document;
  	sprite.open();
  	sprite.write(content);
  	sprite.close(); }
else if (document.all) document.all[''+id+''].innerHTML = content;	
else if (document.getElementById) {
	rng = document.createRange();
	el = document.getElementById(''+id+'');
	rng.setStartBefore(el);
	htmlFrag = rng.createContextualFragment(content)
	while(el.hasChildNodes()) el.removeChild(el.lastChild);
	el.appendChild(htmlFrag); } } }
</script>
</head>
<body onmousedown="checks(event),varme();" onmouseup="window.clearTimeout(timeoutID);">
sometext
<div id="mymenu" style="background-color:#FFE0FF; visibility:hidden; position:absolute; top:100px; left:100px; width:100px; font-size:8pt; text-align:left;"></div>

</body>
</html>

RaZEr · 05.08.2008, 19:33

Событие повешенное на элемент, вешается и на все вложенные. В обработчике проверяй какой элемент его вызвал или используй event.stopPropagation()

Viro_man · 05.08.2008, 23:01

Спасибо за ключевое слово, которое привело меня к другому более лучшему решению!

Код:

<html>
<head>
<script type="text/javascript">

var mycontent='<a href="#">LINK</a><br><a href="#">LINK2</a>';

function containsDOM (container, containee) {
  var isParent = false;
  do {
    if ((isParent = container == containee))
      break;
    containee = containee.parentNode;
  }
  while (containee != null);
  return isParent;
}

function checkMouseEnter (element, evt) {
  if (element.contains && evt.fromElement) {
    return !element.contains(evt.fromElement);
  }
  else if (evt.relatedTarget) {
    return !containsDOM(element, evt.relatedTarget);
  }
}

function checkMouseLeave (element, evt) {
  if (element.contains && evt.toElement) {
    return !element.contains(evt.toElement);
  }
  else if (evt.relatedTarget) {
    return !containsDOM(element, evt.relatedTarget);
  }
}



var timeoutID; var tempevent;

Posx=0; Posy=0;
function checks(e) { if (!e) var e = window.event;
if (e.pageX || e.pageY) { Posx = e.pageX; Posy = e.pageY; }
else if (e.clientX || e.clientY) { Posx = e.clientX; Posy = e.clientY; } }

function varme() { timeoutID=window.setTimeout('mymy()',1000); }

function mymy() { domlay('mymenu','1',Posx,Posy,mycontent); }

function domlay(id,trigger,lax,lay,content) {
if(typeof window.pageXOffset!='undefined') { var posleft=window.pageXOffset; var postop=window.pageYOffset; }
else { var posleft=window.document.body.scrollLeft; var postop=window.document.body.scrollTop; } 
if (trigger=="1") {
	if (document.layers) { document.layers[''+id+''].visibility = "show"; }
	else if (document.all) { document.all[''+id+''].style.visibility = "visible"; }
	else if (document.getElementById) { document.getElementById(''+id+'').style.visibility = "visible"; } }
else if (trigger=="0") {
	if (document.layers) { document.layers[''+id+''].visibility = "hide"; }
	else if (document.all) { document.all[''+id+''].style.visibility = "hidden"; }
	else if (document.getElementById) { document.getElementById(''+id+'').style.visibility = "hidden"; } }	
if (lax) { 
	lax=lax+posleft-5;
	if (document.layers) { document.layers[''+id+''].left = lax; }
	else if (document.all) { document.all[''+id+''].style.left=lax; }
	else if (document.getElementById) { document.getElementById(''+id+'').style.left=lax+"px"; } }
if (lay) { lay=lay+postop-5;
	if (document.layers) { document.layers[''+id+''].top = lay; }
	else if (document.all) { document.all[''+id+''].style.top=lay; }
	else if (document.getElementById) { document.getElementById(''+id+'').style.top=lay+"px"; } }
if (content) {
if (document.layers) {
	sprite=document.layers[''+id+''].document;
  	sprite.open();
  	sprite.write(content);
  	sprite.close(); }
else if (document.all) document.all[''+id+''].innerHTML = content;	
else if (document.getElementById) {
	rng = document.createRange();
	el = document.getElementById(''+id+'');
	rng.setStartBefore(el);
	htmlFrag = rng.createContextualFragment(content)
	while(el.hasChildNodes()) el.removeChild(el.lastChild);
	el.appendChild(htmlFrag); } } }
</script>
</head>
<body onmousedown="checks(event),varme();" onmouseup="window.clearTimeout(timeoutID);">
sometext
<div id="mymenu" style="background-color:#FFE0FF; visibility:hidden; position:absolute; top:100px; left:100px; width:100px; font-size:8pt; text-align:left;"
onmouseout="if (checkMouseLeave(this, event)) {
                   this.style.visibility = 'hidden';
                 }"></div>

</body>
</html>

05.08.2008, 19:33	# 2
RaZEr МОД-Оператор ЭВМ Регистрация: 18.04.2002 Адрес: Питер Сообщения: 4 343	Событие повешенное на элемент, вешается и на все вложенные. В обработчике проверяй какой элемент его вызвал или используй event.stopPropagation()