Element bei onmousemove hidden setzten
Paul
- javascript
0 Der Martin0 dave0 Paul
0 Struppi0 Paul0 Struppi0 Der Martin1 JürgenB
Moin,
ich möchte ein Element hidden setzten wenn die Maus bewegt wird.
Variante 1:
<body onmousemove="document.getElementById('restrictionField').style.visibility = 'hidden';">
Variante 2:
<body onmousemove="abc()">
dann js:
function abc() {
if (document.getElementById('restrictionField').style.visibility == 'visible') document.getElementById('restrictionField').style.visibility = 'hidden';
}
Welche Variante ist sinnvoller und warum?
Danke für Eure Überlegungen,
Paul
Hallo,
ich möchte ein Element hidden setzten wenn die Maus bewegt wird.
und wieder einblenden, wenn ...?
Variante 1:
<body onmousemove="document.getElementById('restrictionField').style.visibility = 'hidden';">
Damit wird das Element bei der erstebesten Mausbewegung ausgeblendet und erscheint nie wieder.
Variante 2:
<body onmousemove="abc()">
dann js:
function abc() {
if (document.getElementById('restrictionField').style.visibility == 'visible') document.getElementById('restrictionField').style.visibility = 'hidden';
}
Damit fragst du erst den momentanen Status ab, bevor du das Element ausblendest. Wozu?
> Welche Variante ist sinnvoller und warum?
Ich kann in keiner von beiden einen Sinn erkennen. Auch von der Performance her dürften sie sich in nichts nachstehen: In beiden Fällen wird bei jeder klitzekleinen Mausbewegung das Dokument nach einem Element mit einer bestimmten ID durchsucht - im einen Fall, um stumpf die visibility-Eigenschaft auf "hidden" zu setzen, im anderen Fall, um sie erst abzufragen.
Also was hast du eigentlich vor?
Ciao,
Martin
--
Wer barfuß geht, dem kann man nicht die Schuld in die Schuhe schieben.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Hi,
Welche Variante ist sinnvoller und warum?
Ich seh keinen wirklichen Unterschieden zwischen deinen beiden.
Wenn es dir um Performance geht:
<body onmousemove="abc()">
dann js:
function abc() {
document.getElementById('restrictionField').style.visibility = 'hidden';
document.body.removeEventListener('onmousemove',abc,false);
}
Ich seh keinen wirklichen Unterschieden zwischen deinen beiden.
funktionell unterscheiden sie sich nicht. Das ist klar.
Wenn es dir um Performance geht:
z.B. (ich hätte aber eher die andere Variante als performanter eingeschätzt)
Variante 1:
<body onmousemove="document.getElementById('restrictionField').style.visibility = 'hidden';">
Variante 2:
<body onmousemove="abc()">
dann js:
function abc() {
if (document.getElementById('restrictionField').style.visibility == 'visible') document.getElementById('restrictionField').style.visibility = 'hidden';
}
>
> Welche Variante ist sinnvoller und warum?
Keine, weil du den HTML Code unnötigerweise mit JS "verschmutzt".
~~~javascript
document.onmousemove = function() {
var el = document.getElementById('restrictionField');
el.style.visibility = el.style.visibility == 'visible' ? 'hidden' : 'visible';
};
Wobei das einen Blinkeffekt hat, ist das was du willst?
Struppi.
Keine, weil du den HTML Code unnötigerweise mit JS "verschmutzt".
document.onmousemove = function() {
var el = document.getElementById('restrictionField');
el.style.visibility = el.style.visibility == 'visible' ? 'hidden' : 'visible';
};
Ok, aber das vorherige Abfragen des Attributs visible ist keine Performacebremse?
> Wobei das einen Blinkeffekt hat, ist das was du willst?
Ne, hab den Code zum posten minimal gehalten. Das betreffende Element (ein Hilfetext) wird bei einer bestimmten Aktion visible. Und soll einfach verschwinden wenn der Benutzer weiterarbeiten will (die Maus bewegt).
Keine, weil du den HTML Code unnötigerweise mit JS "verschmutzt".
document.onmousemove = function() {
var el = document.getElementById('restrictionField');
el.style.visibility = el.style.visibility == 'visible' ? 'hidden' : 'visible';
};
>
> Ok, aber das vorherige Abfragen des Attributs visible ist keine Performacebremse?
Doch. Wobei das relativ ist, wir reden hier von Mikrosekunden, wieso fragst du?
Struppi.
Hi,
Ok, aber das vorherige Abfragen des Attributs visible ist keine Performacebremse?
doch, in gewisser Weise schon. Jeder Aufruf von getElementById() veranlast die JS-Engine, das DOM nach der angegebenen ID zu durchsuchen. Wenn du so häufig auf dieses eine Element zugreifen willst (oder musst), solltest du zu Beginn (onload) diese Referenz *einmal* ermitteln und speichern.
Das betreffende Element (ein Hilfetext) wird bei einer bestimmten Aktion visible. Und soll einfach verschwinden wenn der Benutzer weiterarbeiten will (die Maus bewegt).
Das finde ich bedenklich. Hast du auch daran gedacht, dass z.B. optische Mäuse im Gegensatz zu den mechanischen (mit Kugel) sehr unruhig sind, und der Zeiger ja auch "in Ruhe" oft schon um ein, zwei Pixel hin- und herzittert, selbst wenn die Maus unberührt auf dem Tisch liegt?
So long,
Martin
Hallo Paul,
bei deinen beiden Versionen wird die Aktion jedes mal durchgeführt, egal ob der Text (schon) da ist, oder nicht. Wenn es dir um Performance geht, solltest du den Eventhandler erst dann notieren, wenn du ihn brauchst und danach sich sofort wieder entfernen lassen. Ob das mit onmousemove=... erledigt werden kann, oder ob du eine browserübergreifende add/removeEvent_Routine einsetzen musst, hängt vom Umfeld ab.
Gruß, Jürgen