IMHO.WS

IMHO.WS (https://www.imho.ws/index.php)
-   Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)
-   -   Сделал скрипт, а дальше не знаю. (https://www.imho.ws/showthread.php?t=134244)

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

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

Код:


<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>



Часовой пояс GMT +4, время: 15:20.

Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.