Doppelklick vermeiden (bei OnClick event)

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Doppelklick vermeiden (bei OnClick event)

    hi

    habe da ein <img> in einem <a> drin, und der <a> hat eine funktion auszuführen wenn man draufklickt.

    das problem ist, dass der user aus gewohnheit evt aber auch einen doppelklick macht. dabei sollte die funktion trotzdem nur einmal ausgeführt werden.

    dachte zuerst, kein problem, die funktion bei onclick rein, und bei ondblclick einfach ein void() rein.

    nützt jedoch nichts, selbst dann wird die onclick funktion zweimal aufgerufen.

    hier mal der code:
    Code:
    <li id='a_1176715267'><a href='javascript:void();' onClick='addtoselection(1176715267)' onDblClick='void()'><img src='thumb.php?id=1176715267'></a></li>

    das "addtoselection" ist die aufzurufende funktion welche nur einmal aufgerufen werden soll, unabhängig vom doppel- oder einzelklick.

    wie könnte man das lösen?

  • #2
    Merken, ob die Funktion bereits aufgerufen wurde und entsprechend terminieren. Soll die Funktion mehrfach ausgeführt werden, nur halt dieser Doppelklickeffekt vermieden werden, Zeitstempel merken und nicht innerhalb von einer Sekunde mehrmals ausführen. Oder in der Funktion den onclick-Eventhandler entfernen und per window.setTimeout wieder anfügen.

    Kommentar


    • #3
      hm, das wäre ne interessante idee, den onClick-handler zu entfernen.

      problem evt nur, dass das <li> eine ID hat, das <a> ja aber nicht.
      komm ich da trotzdem an das <a> ran?

      Kommentar


      • #4
        Zunächst mal, warum verwendest du einen Link, wenn du das onclick event auch direkt dem Image zuweisen kannst.

        Was dein Problem angeht, so verhält es sich wie folgt:
        PHP-Code:
        <html>

        <
        body>
        <
        p onclick="hoch()" ondblclick="doppel();">hochzählen</p>
        <
        p onclick="zeige()">zeige</p>

        <
        script>
        0;
        0;

        function 
        hoch() {
        i++;
        }

        function 
        doppel() {
        j++;
        }

        function 
        zeige() {
        alert("i: " " - j: " j);
        }
        </
        script>

        </
        body>
        </
        html
        Aber es spricht ja nichts dagegen, in der onclick funktion eine abfrage einzubauen.
        EDIT:
        Mein erster Suchtreffer bringt übrigens das hier: http://forum.de.selfhtml.org/archiv/2006/3/t126626/
        Was hast du gefunden?

        Kommentar


        • #5
          problem evt nur, dass das <li> eine ID hat, das <a> ja aber nicht. komm ich da trotzdem an das <a> ran?
          Klar! Ist doch ein Kindknoten!

          Aber wie gesagt, das <a> hat da gar nichts zu suchen!

          Kommentar


          • #6
            Original geschrieben von TobiaZ
            [B]Zunächst mal, warum verwendest du einen Link, wenn du das onclick event auch direkt dem Image zuweisen kannst.
            hm, gute Frage, hab irgendwie ganz vergessen, dass bilder direkt den OnClick annehmen können.

            gut, die frage hat sich erledigt, ich habe jetzt in der funktion die onclick handler entfernt, so dass es nur einmal klickbar ist

            Danke, darf geschlossen werden

            Kommentar


            • #7
              Einfach vorm Aufruf der Funktion den onClick-Handler lösen.

              <a href="..." onclick="this.onclick = null; yourFunc();">...</a>

              Falls du den Handler dynamisch bindest, muss das element.onclick = null eben in der Funktion selbst stattfinden.

              <a href="..." onclick="yourFunc(this);">...</a>


              Vergiss aber nicht, den Handler wieder zu binden, wenn das Item von der Merkliste entfernt wird.


              Übrigens ist das a-Tag nicht wirklich überflüssig. Es kann einen Non-JS-Fallback sein.

              Kommentar


              • #8
                Original geschrieben von onemorenerd
                ich überflüssig. Es kann einen Non-JS-Fallback sein.
                Ja ne, ist klar...
                a href='java script:void();'

                Kommentar


                • #9
                  Ok, ich formuliere es mal anders: Das a-Tag darf nicht überflüssig sein. Entweder ist es ein Fallback für Leute ohne JS - dann steht da natürlich kein JS im href - oder es muss ganz weg.

                  Kommentar


                  • #10
                    Möglichkeit 1:
                    Code:
                    <html>
                    <head><title>foobar</title></head>
                    <script type="text/javascript">
                    
                    var count_last_click = 0;
                    
                    function count() {
                    	var now = new Date();
                    	if (now.getTime() < count_last_click + 1000) {
                    		return;
                    	}
                    	count_last_click = now.getTime();
                    
                    	document.getElementById('counter').innerHTML++;
                    }
                    </script>
                    <body>
                    <a href="#" onclick="count(); return false;">count</a>
                    <div id="counter">0</div>
                    </body>
                    </html>
                    Möglichkeit 2:
                    Code:
                    <html>
                    <head><title>foobar</title></head>
                    <script type="text/javascript">
                    function count() {
                    	document.getElementById('counter').innerHTML++;
                    }
                    </script>
                    <body>
                    <a href="#" onclick="count(); return false;">count</a>
                    <div id="counter">0</div>
                    <strong>Bitte nur einmal klicken!</strong>
                    </body>
                    </html>

                    Kommentar

                    Lädt...
                    X