[FRAGE] Einmaliges überschatten von Clickevents

[sonyfuchs]

Hallo und guten Tag liebe JS Community,
ich programmiere seit nun fast einem halben Jahr in JS und bin auf ein Problem gestoßen, das sich nicht ergoogeln lässt. (Zumindest nicht von mir )
Nun möchte ich euch gerne meine Problemstellung erläutern und hoffe bald Hilfe zu bekommen.
Ich habe eine HTML Seite mit vielen Elementen die alle 0 - n onmouseup - Events besitzen. (Die meisten Elemente besitzen nur ein Event)
Nun habe ich einen Hilfebutton in der Oberfläche. Clickt man diesen an geht die Seite in den Hilfemodus. ( Hilfebutton blinkt)
Klickt man nun ein beliebiges Element an soll ein alert mit der id des Elements angezeigt werden.
Bei quitierung der Meldung wird der Hilfemodus verlassen.

Jetzt dürfen ja, nach dem betätigen des Hilfebuttons, die vorhandenen Events nicht ausgeführt werden. Stattdessen sollen alle Elemente die Hilfeanzeigenfunktion ausführen.
Und dann aber wieder ihre normalen Events zurückerhalten.

Weiß jemand wie man dies realisieren kann?

Ich würde mich sehr über eure Hilfe freuen und ich hoffe ich konnte mein Problem verständlich schildern.

Lieben Gruß aus dem schönen Rheinland.

p.s.
es soll quasi so ne Art Tooltip sein. Allerdings zum Clicken und nicht zum Rüberfahren.

 

[mikdoe]

eventhandler onclick schon versucht?

 

[paul schmitz]

<script>var help=0;
function toggleHelp(){
  if(help=0){
    help=1;
  }else{
    help=0;
  }
}
function aktion(id){
  if(!help){
  switch (id){
    case 1:
//AKTION bei NICHT HILFE
    break;
  }
  }else{
  switch (id){
    case 1:
//AKTION bei HILFE
    break;
  }
  }
}
</script>
<div onmouseup="aktion('1')"></div>

<div id="helpbutton" onclick="toggleHelp()">Hilfe</div>

Grobe Erklärung: die Variable help beinhaltet, ob Hilfe aufgerufen wurde oder nicht. toggleHelp() ändert diesen Zustand.
Wenn man ein onmouseup ausgelöst wird, prüft die funktion aktion(), ob der Hilfemodus aktiviert worden ist, und führt dementsprechend eine definierbare Aktion aus.
Ungetestet, sollte aber funktionieren (eigentlich).

 

[sonyfuchs]

eventhandler onclick schon versucht?

Ich versteh den Zusammenhang nicht. Onclick ist doch nur eine andere Eventart als onmouseup. Onlick überlappt doch nicht eine andere Eventart.

- - - Aktualisiert - - -

<script>var help=0;
function toggleHelp(){
  if(help=0){
    help=1;
  }else{
    help=0;
  }
}
function aktion(id){
  if(!help){
  switch (id){
    case 1:
//AKTION bei NICHT HILFE
    break;
  }
  }else{
  switch (id){
    case 1:
//AKTION bei HILFE
    break;
  }
  }
}
</script>
<div onmouseup="aktion('1')"></div>

<div id="helpbutton" onclick="toggleHelp()">Hilfe</div>

Grobe Erklärung: die Variable help beinhaltet, ob Hilfe aufgerufen wurde oder nicht. toggleHelp() ändert diesen Zustand.
Wenn man ein onmouseup ausgelöst wird, prüft die funktion aktion(), ob der Hilfemodus aktiviert worden ist, und führt dementsprechend eine definierbare Aktion aus.
Ungetestet, sollte aber funktionieren (eigentlich).

Da müsste ich ja leider eine switch case anweisungskette über alle auftretenden Elemente, die auf ein Event reagieren, machen. (165 bisher).
Oder in jeder bisher geschriebenen Funktion die Möglichkeit auf Hilfe zu wechseln. Dies sind auch ziemlich viele.
Ich frag mich ob es nicht einen einfacheren Weg gibt. Sowas wie alle Events vom "document" auf hilfe stellen und danach wieder auf initial.

 

[paul schmitz]

Ich wusste nicht, dass es so viele sind. Dann ist das eine dumme Lösung. Das gibt es warscheinlich einen besseren Weg.

- - - Aktualisiert - - -

Am Anfang:

var AktionsArrayNormal=["alert ('hi');","..."];//hier kommen die normalaktionen (ohne Hilfe) der Elemente in der gleichen Reihenfolge wie die ids rein
var elementIds=["id1","id2"];//hier kommen die ids der zu ändernden Elemente rein
var elementIdsLength=elementIds.length;

In der ToggleHelp bei Nichthilfe:

for(var i=0;i<elementIdsLength;i++){
 $("#".elementIds[i]).attr("onmouseup",AktionsArrayNormal[i]);
}

In der ToggleHelp bei Hilfe:

for(var i=0;i<elementIdsLength;i++){
 $("#".elementIds[i]).attr("onmouseup","alert(".elementIds[i].");");
}

ungetestet

- - - Aktualisiert - - -

Und natürlich die Aktion() rausschmeißen!

 

[tsseh]

den hilfe-event-handler bei klick auf den hilfebutton nur am document registrieren, in der capturing-phase
dann im hilfe-event-handler das target abfragen und die hilfefunktion für das entsprechende targetelement aufrufen
stopPropagation aufrufen
hilfeeventhandler wieder entfernen

irgendwie geht bei mir heute die mdn seite nicht, deswegen mal ohne links

 

[sonyfuchs]

den hilfe-event-handler bei klick auf den hilfebutton nur am document registrieren, in der capturing-phase
dann im hilfe-event-handler das target abfragen und die hilfefunktion für das entsprechende targetelement aufrufen
stopPropagation aufrufen
hilfeeventhandler wieder entfernen

irgendwie geht bei mir heute die mdn seite nicht, deswegen mal ohne links

das hört sich spannen an. wie häng ich die hilfefunktion als event in das document ein, so dass die anderen funktionen an den elementen selbst nicht mehr ausgeführt werden?

 

[tsseh]

<!DOCTYPE HTML>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div id="div1" data-helpid="1">bäh</div>
    <div id="div2" data-helpid="2">mhh</div>
    <div id="div3" data-helpid="3">uff</div>
    <div id="div4" data-helpid="4">ahh</div>
    <button id="help">Hilfe</button>
    <script>
      document.getElementById("div1").addEventListener("click", function()
      {
        alert("div1 handler");
      }); 
      document.getElementById("div2").addEventListener("click", function()
      {
        alert("div2 handler");
      });
      document.getElementById("div3").addEventListener("click", function()
      {
        alert("div3 handler");
      });
      document.getElementById("div4").addEventListener("click", function()
      {
        alert("div4 handler");
      });
      
      document.getElementById("help").addEventListener("click", function help()
      {
        var help = function(id)
        {
          switch (id)
          {
            case "1":
              alert("div1 hilfe");
              break;
            case "2":
              alert("div2 hilfe");
              break;
            case "3":
              alert("div3 hilfe");
              break;
            case "4":
              alert("div4 hilfe");
              break;
            default:
              alert("keine Hilfe da");
          }
        };
        
        var helpHandler = function(e)
        {
          help(e.target.getAttribute("data-helpid"));
          document.removeEventListener("click", helpHandler, true);
          e.stopPropagation();
        };
        document.addEventListener("click", helpHandler, true);
      });
    </script>
  </body>
</html>

 

[sonyfuchs]

Ich hoffe ihr seid mir nicht bös, aber ich habs n bisschen anders gelöst. Danke trotzdem für eure Aufwände.
Ich wollte keine langen switch - case - Blöcke.
Meine Lösung:
Sobald man den Hilfebutton drückt wird ein 100vw und 100vh großes div erzeugt und in den body gebunden. Das div ist durchsichtig und hat einen z-index von 9000 . Ich habe es "Glasplatte" getauft.
Die Glasplatte hat einen Eventlistner bekommen mit einer Funktion die einen Eventparameter bekommt.
Nun ist die Glasplatte im Vordergrund. Klickt man diese an, entferne ich die Glassplate direkt vom body und frag:

document.elementFromPoint(button.clientX, button.clientY);

Dann kann ich ganz bequem die ElementId ausgeben.

Schönes Wochenende

 

[tsseh]

das ist so ähnlich wie meine lösung, nur nicht so schön.
die id, in meinem fall besorge ich nicht die id, sondern einen helpid musst du ja dann einem hilfetext zuordnen, ich mach das über switch-case, du kannst das auch über ein array-index oder eine elementproperty lösen

 

[paul schmitz]

Ich hoffe ihr seid mir nicht bös, aber ich habs n bisschen anders gelöst. Danke trotzdem für eure Aufwände.
Ich wollte keine langen switch - case - Blöcke.
Meine Lösung:
Sobald man den Hilfebutton drückt wird ein 100vw und 100vh großes div erzeugt und in den body gebunden. Das div ist durchsichtig und hat einen z-index von 9000 . Ich habe es "Glasplatte" getauft.
Die Glasplatte hat einen Eventlistner bekommen mit einer Funktion die einen Eventparameter bekommt.
Nun ist die Glasplatte im Vordergrund. Klickt man diese an, entferne ich die Glassplate direkt vom body und frag:

document.elementFromPoint(button.clientX, button.clientY);

Dann kann ich ganz bequem die ElementId ausgeben.

Schönes Wochenende

Gute Lösung! Es gibt nur ein Problem: das Element mit dem z-index 9001

tsseh, kauf dir mal ne Shifttaste.