[JS] ondblclick en onclick botsen, hoe te fixen? - Softwareontwikkeling

zondag 17 juni 2007 16:28

Acties:

Topicstarter

beste mensen,

ik heb in een script van mij het volgende probleem:

ik heb een icoontje (divje) waarvan ik het onclick en het ondblclick event van opvang.

De onclick laat een menutje zien. Dit zijn twee divjes, 1 fullscreen, en 1 echt menutje. Als je naast het menu klikt (dus op dat fullscreen divje) sluit het menu weer.

De onDblClick doet iets anders (doet even niet ter zake)

echter, het dblclick event komt niet door omdat na de eerste klik er een andere element over het icoontje heen wordt geplaatst door het onclick event.

nu wil ik dit oplossen door een kleine timer (500ms ofzo) te gebruiken in mijn onclick event.
zodoende heb je voldoende tijd voor beide events.

echter nu ik dat doe kom ik een aantal dingen tegen.
ik kan in die timer geen 'e' (event) meegeven, die bestaat dan niet meer, en kan daar dus geen muispositie enzo uit halen.

Verder werkt mijn 'this' niet meer (wat wel te fixen is natuurlijk)

maar veel erger. Ik kan de setTimeout niet cancelen...
normaal doe je dit:

JavaScript:

1
2
3

var TimerID = setTimeout("alert('boe');", 1000);
...
window.clearTimeout(TimerID);

echter, ik heb nu de cleartimeout in mijn dblclick event staan:

JavaScript:

1	tmp.ondblclick = function(e) { window.clearTimeout(iconCloseTimer); anderDing(); }

echter deze doet gewoon niks.. Ik heb een keer een alert achteraan die ondblclick functie geplaatst, en die wordt gewoon uitgevoerd. De clearTimeout wordt dus ook echt uitgevoerd.
Echter, 500ms later krijg ik nog een foutmelding van de timer die dan afgaat...

en ja, iconCloseTimer is globaal.

hoe zit dit?

This message was sent on 100% recyclable electrons.

zondag 17 juni 2007 16:45

Acties:

Padschild

Volgensmij heb ik ooit ergens gelezen, dat je dan achter de onclick event een 'return false;' mee moet geven. Waarom weet ik niet meer precies, maar anders werd dacht ik de ondblclick event gecanceld. Kan er zou gauw ook niks over vinden op google.

In theorie zou je oplossing wel kunnen werken, alleen bedenk wel dat op elke computer de dubbelkliksnelheid anders is ingesteld.

zondag 17 juni 2007 16:49

Acties:

BtM909

Watch out Guys...

moet me er even in verdiepen, maar alert eens je setTimeout handle voor en na het clearen?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

zondag 17 juni 2007 20:28

Acties:

BasieP

Topicstarter

Padschild schreef op zondag 17 juni 2007 @ 16:45:
Volgensmij heb ik ooit ergens gelezen, dat je dan achter de onclick event een 'return false;' mee moet geven. Waarom weet ik niet meer precies, maar anders werd dacht ik de ondblclick event gecanceld. Kan er zou gauw ook niks over vinden op google.

In theorie zou je oplossing wel kunnen werken, alleen bedenk wel dat op elke computer de dubbelkliksnelheid anders is ingesteld.

de return value is voor html en heeft te maken met een onclick event in een anchor. Het voorkomt dat de link gevolgt wordt.

Dit is allemaal JS. eerst een divje fullscreen maken, en dan return false gaat echt geen verschil maken.

verder heeft de dubbelklik snelheid hier ook geen drol mee te maken.

BtM909 schreef op zondag 17 juni 2007 @ 16:49:
moet me er even in verdiepen, maar alert eens je setTimeout handle voor en na het clearen?

die retourneerd in beide gevallen een getal (wat zo hoort) voor en na het cancelen.
dit is echter niet zo gek omdat dit gewoon een timer 'id' is, het nummer van de timer.
intern wordt de timer met dat nummer gecancelt, echter de handle blijft bestaan (het is nl. gewoon een nummer)

[ Voor 45% gewijzigd door BasieP op 18-06-2007 08:27 ]

This message was sent on 100% recyclable electrons.

maandag 18 juni 2007 10:51

Acties:

Rekcor

Check http://p2p.wrox.com/topic.asp?TOPIC_ID=22651

maandag 18 juni 2007 12:08

Acties:

BasieP

Topicstarter

Rekcor schreef op maandag 18 juni 2007 @ 10:51:
Check http://p2p.wrox.com/topic.asp?TOPIC_ID=22651

een perfect voorbeeld van mijn scenario inderdaad, echter doet hun 'oplossing' het gewoon niet.

hier hun (ietwat gestripte) testcase:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Cancel Click</title>
        <script type="text/javascript">
            var iTimeoutId = null;

            function startSingleClick() {
              iTimeoutId = setTimeout("showMessage('Single click')", 500);
            }

            function startDblClick() {
              showMessage("Double click");

              if (iTimeoutId) {
                window.clearTimeout(iTimeoutId);
              }
            }

            function showMessage(Text) {
              var oOutput = document.getElementById("txtOutput");
              oOutput.value += (Text + "\n");
            }
        </script>
    </head>
    <body>
        <div style="width: 50px; height: 50px; background-color: red;" onclick="startSingleClick();" ondblclick="startDblClick();"></div>
        <textarea id="txtOutput" rows="20" cols="40"></textarea>
    </body>
</html>

zoals je ziet komt wanneer je dubbel klikt gewoon daarna de single click door (in FF dan, in IE werkt ie wel)

[ Voor 9% gewijzigd door BasieP op 18-06-2007 12:38 ]

This message was sent on 100% recyclable electrons.

maandag 18 juni 2007 13:11

Acties:

Rekcor

BasieP schreef op maandag 18 juni 2007 @ 12:08:
(in FF dan, in IE werkt ie wel)

Die gast die de oplossing aandroeg lijkt ook bij MS te werken, vandaar

Het vreemde is dat Mozilla een single-click event fired na een double-click. Het lukt idd niet om die single-click te cancellen.

The dblclick event is rarely used. Even when you use it, you should be sure never to register both an onclick and an ondblclick event handler on the same HTML element. Finding out what the user has actually done is nearly impossible if you register both.

After all, when the user double–clicks on an element one click event takes place before the dblclick. Besides, in Netscape the second click event is also separately handled before the dblclick. Finally, alerts are dangerous here, too.

So keep your clicks and dblclicks well separated to avoid complications.

Bron: http://www.quirksmode.org/js/events_mouse.html

Misschien moet je naar een andere oplossing zoeken, zonder single/double-clicks?

Modbreak:Trollen doe je maar buiten het forum

[ Voor 44% gewijzigd door BtM909 op 19-06-2007 09:45 . Reden: Toevoeging citaat ]

maandag 18 juni 2007 16:06

Acties:

BasieP

Topicstarter

Rekcor schreef op maandag 18 juni 2007 @ 13:11:

Misschien moet je naar een andere oplossing zoeken, zonder single/double-clicks?

mja das natuurlijk geen oplossing.

als IE het voor elkaar krijgt dan kunnen in theorie andere browsers het ook.
Verder vind ik het helemaal niet uit dat er 1 of 2 'single' click events af gaan. Dat gebeurd nu ook. Ik doe er alleen niks mee.

Door die timer werk ik dus eigenlijk om het hele probleem van de ondblclick en de onclick heen. Behalve dan dat die timer fucked is in FF. (en wellicht andere browsers)

ik ben gelukkig iets verder momenteel

ik ben er achter dat het timerID te snel oploopt. dwz

wanneer ik dubbelklik doe ik eigenlijk twee kliks.
in FF gebeurd er dit:

1: Start timer met id 2 (weet niet waarom niet gewoon bij 0 of 1 beginnen)
2: Start timer 3
3: Double click --- hier registreer ik dblclick
4: Cancel timer 3
5: Single click --- hier registreer ik enkele klik vanuit de timer (timer 2)

de tweede timer wordt dus gecancelt, en de eerste gaat dus .5 seconden later af..

edit2:

fixed!

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Cancel Click</title>
        <script type="text/javascript">
            var iTimeoutId = null;

            function startSingleClick() {
                if (iTimeoutId) {
                    showMessage('Cancel timer ' + iTimeoutId);
                    window.clearTimeout(iTimeoutId);
                }
                iTimeoutId = setTimeout("showMessage('Single click')", 500);
                showMessage('Start timer ' + iTimeoutId);
            }

            function startDblClick() {
                showMessage("Double click");

                if (iTimeoutId) {
                    showMessage('Cancel timer ' + iTimeoutId);
                    window.clearTimeout(iTimeoutId);
                }
            }

            function showMessage(Text) {
                var oOutput = document.getElementById("txtOutput");
                oOutput.value += (Text + "\n");
            }
        </script>
    </head>
    <body>
        <div style="width: 50px; height: 50px; background-color: red;" onclick="startSingleClick();" ondblclick="startDblClick();"></div>
        <textarea id="txtOutput" rows="20" cols="40"></textarea>
    </body>
</html>

zoals je ziet heb ik dus nu bij de onclick ook het cancelen van eventuele timers. er kan nu dus maar 1 timer actief zijn ipv meerdere.

[ Voor 45% gewijzigd door BasieP op 18-06-2007 16:11 ]

This message was sent on 100% recyclable electrons.

maandag 18 juni 2007 16:13

Acties:

--MeAngry--

aka Qonstrukt

Je zou natuurlijk, lekker ranzig, in je dblclick event een variabele kunnen zetten die aangeeft dat er net gedubbelklikt is, en daarachter plaats je dan weer een timeout van 500ms om te zorgen dat die variabele weer false is.
In je click event controleer je dan of die variabele true is of niet. Zo kun je in ieder geval zorgen dat de 2e click event niet uitgevoerd wordt.

Tesla Model Y RWD (2024)

maandag 18 juni 2007 16:47

Acties:

Rekcor

BasieP schreef op maandag 18 juni 2007 @ 16:06:
[...]
edit2:

fixed!

Gefeliciteerd!

Maar er zit wel een nadeel aan je script - wat Padschild opmerkte - namelijk dat jij nu bepaalt wat de dubbelklik-snelheid moet zijn (en niet de gebruiker). En ik ken mensen die errug langzaam dubbelklikken

Maar goed, die hebben waarschijnlijk weer niets op jouw site te zoeken

.

maandag 18 juni 2007 17:16

Acties:

BasieP

Topicstarter

Rekcor schreef op maandag 18 juni 2007 @ 16:47:
[...]

Gefeliciteerd!

Maar er zit wel een nadeel aan je script - wat Padschild opmerkte - namelijk dat jij nu bepaalt wat de dubbelklik-snelheid moet zijn (en niet de gebruiker). En ik ken mensen die errug langzaam dubbelklikken

Maar goed, die hebben waarschijnlijk weer niets op jouw site te zoeken .

true, ik bepaal de dubbelklik snelheid (500ms).

als jij een methode weet om de windows dubbelklik snelheid te achterhalen dan implementeer ik het graag

[ Voor 4% gewijzigd door BasieP op 18-06-2007 17:16 ]

This message was sent on 100% recyclable electrons.

maandag 18 juni 2007 17:26

Acties:

Rekcor

BasieP schreef op maandag 18 juni 2007 @ 17:16:
[...]

true, ik bepaal de dubbelklik snelheid (500ms).

als jij een methode weet om de windows dubbelklik snelheid te achterhalen dan implementeer ik het graag

Hehe, of eerst een popup met de vraag 'Typ hier u dubbelkliksnelheid'