✔ TD onmouse Events

[dobermant]

Hallo,


Ich habe eine Zelle (TD) in einer Tabelle. in dem TD habe ich per appendChild ein Image eingefügt. Das Image soll visible oder hidden geschaltet werden, wenn über die TD gehovert wird.

Das klappt auch soweit. Wenn der Mousezeiger allerdings über das Image liegt, wird der onmouseout Event gefeuert, obwohl sich das Image ja in der TD befindet. Das hat zur Folge, dass das Image hidden gesetzt wird. Dadurch feuert wieder der onmouseover, usw. Das Bild dadurch flackert ständig.

Ist das korrekt? Wie kann ich das verhindern?

Danke, Franz

// get target element
function addTdButton(){
	var tab;
	var table = document.getElementById("mytable");
	var tds = table.getElementsByTagName('td');
	for (var i = 0; i < tds.length; i++) {
		tab=document.createElement("a");
		tab.setAttribute("class","tab");
		tab.setAttribute("href","a.html");
		tab.style.visibility='hidden';
		tab.innerHTML="<img src=\"gif.gif\" href=\"a.html\" >";
	
		tds[i].className = 'tbl';
		tds[i].appendChild(tab);	
	}	
}

function getEventTarget(e) {
    var e = e || window.event;
    return e.target || e.srcElement;
}


function addEdit(e) {
    var target = getEventTarget(e);
    if (target.tagName.toLowerCase() === 'td') {
	var edit = target.getElementsByTagName('a');
	edit[0].style.visibility='visible';
    }
}

function removeEdit(e) {
    var target = getEventTarget(e);
    if (target.tagName.toLowerCase() === 'td') {
	var edit = target.getElementsByTagName('a');
	edit[0].style.visibility='hidden';
    }
}


window.onload = function () {
	addTdButton();

    if (document.getElementsByTagName && document.
    getElementById && document.createElement) {

        var mytable = document.getElementById('mytable');

        if (!mytable) {
            return
        };

        mytable.onmouseover = function (e) {
			
            	     addEdit(e)	
			
        }
        mytable.onmouseout = function (e) {

            	    removeEdit(e);

        }


    }

}

 

[Fabio Hellmann]

Hi,
machs doch so, dass du sobald 'onmouseover' einen Wert liefert, du das Image sichtbar schaltest (dann nicht mehr updaten). Und sobald 'onmouseout' einen Wert liefert, setzt du das Image wieder nicht sichtbar.

ps.: Ich hab das vorher nicht ausprobiert.

Gruß

Fabio

 

[dobermant]

Hi,
machs doch so, dass du sobald 'onmouseover' einen Wert liefert, du das Image sichtbar schaltest (dann nicht mehr updaten). Und sobald 'onmouseout' einen Wert liefert, setzt du das Image wieder nicht sichtbar.

ps.: Ich hab das vorher nicht ausprobiert.

Gruß

Fabio

...hmmm, was meinst Du mit

nicht mehr updaten

Auch dürfte doch der onmouseout Event nicht feuern wenn ich über das Bild hover. Bei Text innerhalb der TD wird der Event auch nicht gefeuert.

Gruß Franz

 

[Quaese]

Hi,

ich würde es etwas anders organisieren.

Du durchläufst ohnehin alle TDs. Dort könntest du auch die Events direkt an die Zellen binden.

Wird ein mouseout-Event gefeuert, wird geprüft, ob das Zielelement ein Kindelement der Zelle ist oder nicht und dementsprechend der Link ausgeblendet oder nicht.

Beispiel:

// Routine zum Bestimmen, ob ein Element Kindknoten eines übergeordneten Elements ist
// Parameter:
// objElem - (object) Element, das getestet werden soll, ob es Kindknoten ist
// objRoot - (object) optional; Element, das den Kindknoten enthalten soll (default: document)
isChild = function(objElem, objRoot){
  objRoot = (objRoot === undefined)? document : objRoot;

  var arrChildren = (/*@cc_on ! @*/false)? objRoot.all : objRoot.getElementsByTagName("*"),
      blnRet = false;

  for(var i=0, iLen=arrChildren.length; i<iLen; i++){
  	if(arrChildren[i] == objElem){
    	blnRet = true;
      break;
    }
  }
  return blnRet;
}

// get target element
function addTdButton(){
	var tab;
	var table = document.getElementById("mytable");
	var tds = table.getElementsByTagName('td');
	for (var i = 0; i < tds.length; i++) {
		tab=document.createElement("a");
		tab.setAttribute("class","tab");
		tab.setAttribute("href","a.html");
		tab.style.visibility='hidden';
		tab.innerHTML="<img src=\"../bilder/btn_apply.png\" href=\"a.html\" \">";

		tds[i].className = 'tbl';
		tds[i].appendChild(tab);

    tds[i].onmouseover = function(evt){
    	addEdit.call(this, window.event||evt);
    };
    tds[i].onmouseout = function(evt){
    	removeEdit.call(this, window.event||evt);
    };
	}
}

function addEdit(e) {
  if(this.tagName.toLowerCase() === "td"){
    var edit = this.getElementsByTagName('a');
    edit[0].style.visibility='visible';
  }
}

function removeEdit(e) {
  if(this.tagName.toLowerCase() === 'td') {
    // Zielelement bestimmen
    var objTo = (e.toElement !== undefined)? e.toElement : ((e.relatedElement !== undefined)? e.relatedElement : null);

    // Falls das Zielelement kein Kind UND das Zielelement nicht gleich dem Container ist
    if(!isChild(objTo, this) && (this!=objTo)){
      var edit = this.getElementsByTagName('a');
      edit[0].style.visibility='hidden';
    }
  }
}

window.onload = function () {
  addTdButton();
}

Ciao
Quaese

 

[dobermant]

...sauber, undwesentlich eleganter!

Danke und schöenes WE

Franz