Nieuw: click & hold gesture in JavaScript

[Verwijderd]

De tap & hold gesture in iPhone OS (om tekst te selecteren bijvoorbeeld) bracht mij op het idee voor een click & hold gesture in JavaScript, als alternatief voor het hijacken van de rechtermuisknop. Google Maps doet dat bijvoorbeeld om z'n eigen contextmenu aan de rechtermuisknop te hangen.

Kon zo snel niet iets vinden wat dit al deed, dus heb ik zelf maar een proof of concept (Engels) in mekaar gezet.

Zit een vertraging van een halve seconde op, het detecteert sleur & pleur of selecteer-acties, en werkt als het goed is in alle moderne browsers.

Ben eigenlijk vooral op zoek naar suggesties, commentaar en andere (opbouwende) kritiek. Dus vuur maar los.

[Turdie]

nvm

[ Voor 92% gewijzigd door Turdie op 24-03-2010 04:11 ]

[moozzuzz]

IE6 is geen moderne browser dus.

[Nakebod]

Mijn enige commentaar die ik zo kan bedenken:
Van context menu's ben ik gewend dat ze onder mijn rechtermuisknop zitten. Waarschijnlijk ook alleen maar omdat iemand dat ooit zo bedacht heeft, maar daardoor voelt een menu via de linkermuisknop een beetje raar aan.

Verder wel een leuk stukje proof of concept, geen idee of het uniek is, heb het nog nooit gezien in ieder geval.

[amaterasu]

moozzuzz schreef op woensdag 24 maart 2010 @ 09:55:
IE6 is geen moderne browser dus.

en daarmee wil je wat precies zeggen?
De proof of concept site werkt hier gewoon @ IE6 @ me stage hoor

[CherandarGuard]

Mooi werk! Je proof of concept werkt goed, betrouwbaar en snel.
Ik zou zeggen dat het klaar is om ingezet te worden.
De acceptatie vanuit de gebruikers krijg je toch pas als het al een tijd beschikbaar is en ze er aan gewend zijn.

[Bob]

Ik vind het intuïtief, ik zou er zelf snel aan wennen en erg blij zijn dat ik mijn browser context menu nog heb.

[CodeCaster]

Het liefst zou ik wel zien, net als bij om het even welk mobiel OS, dat de pagina iets doet met je input. Laat bijvoorbeeld één loop zien van zo'n afbeelding, startend na het indrukken van de muis:

[ZpAz]

Leuk... maar op de iPhone werkt het geheel dan weer niet. Er gebeurt niets.. denk dat dat bij andere toestellen hetzelfde zal zijn.

[Capital_G]

Een probleem waar ik tegen aan loop is dat hij evengoed leuk alle tekst selecteerd als je binnen het menu sleept (chrome). Zou mooier zijn als dat niet gebeurde, maar ik vraag me af of de browser dat toelaat.

Edit: Zie dat je de muis los moet laten, oops

[ Voor 19% gewijzigd door Capital_G op 24-03-2010 10:44 ]

[SH4D3H]

ZpAz schreef op woensdag 24 maart 2010 @ 10:33:
Leuk... maar op de iPhone werkt het geheel dan weer niet. Er gebeurt niets.. denk dat dat bij andere toestellen hetzelfde zal zijn.

Van de testpagina:

Why doesn't it work on [insert favorite touch screen device]?

A touch screen isn't a mouse. It has no buttons to be depressed or released, and thus fires no mousedown and mouseup events. Besides, it would rob iPhone users (me) of their ability to select text in Safari, among other things. :-P

[Tharulerz]

- Er staat een foutje in je javascript comments, in het woordje copyright

- Als je dit effectief wil 'verspreiden' als plugin oid, moet je het nog iets generieker maken. Haal de addevent onderaan eruit, aangezien die per situatie gaan verschillen, en zet er een kleine howto bij.

[Verwijderd]

@moozzuzz: Nee, IE6 is antiek man! Daarbij werkt het in IETester hier wel in 6.

@CodeCaster: Goed idee, feedback is altijd goed.

@Capital_G: Tja, een mousemove is niet te onderscheppen. Valt dus weinig aan te doen ben ik bang.

@Tharulerz: Foutje verbeterd, dank. Wat verspreiden betreft: had geen plannen om dit verder echt actief te gaan pushen. Ging meer om het bewijzen dat het kan.

[ Voor 17% gewijzigd door Verwijderd op 24-03-2010 19:43 ]

[Touchdomex]

Ik vind persoonlijk dat voor de computer in ieder geval (heb geen touchscreen apparaat ) erg lang is.

Imho kan het korter voor het oproepen van een context menu. Zou wat gebruiksvriendelijker zijn.

[Verwijderd]

@Touchdomex: Als je dit gaat gebruiken, dan zet je de duur v/d vertraging gewoon in een variabele, dat is dus te allen tijde aanpasbaar. Zelfde geldt trouwens voor de bewegingstolerantie.

[ Voor 6% gewijzigd door Verwijderd op 24-03-2010 14:10 ]

[Verwijderd]

ZpAz schreef op woensdag 24 maart 2010 @ 10:33:
Leuk... maar op de iPhone werkt het geheel dan weer niet. Er gebeurt niets.. denk dat dat bij andere toestellen hetzelfde zal zijn.

Klopt, onder android ook niet (chrome lite). Opera Mini nog niet getest.

Dit zou ik alleen niet gebruiken bij normale (grote) websites, omdat het onprofessioneel is vind ik. Leuke toeppassing is inderdaad een applicatie zoals Google Maps. Je zou ook double tap kunnen gebruiken voor touchscreen devices (is veel fijner).

[Verwijderd]

Touchscreens vuren geen mouse events. Zijn namelijk geen muizen. Staat op op de demopagina. Dubbel tap zou inderdaad wel kunnen voor touchscreens. Of nog beter: dubbel tab & hold.

[ Voor 10% gewijzigd door Verwijderd op 24-03-2010 19:34 ]

[Verwijderd]

Ziet er leuk uit! Misschien een mogelijkheid om het zo te maken dat als je de muis ingedrukt houdt, en loslaat op een item, dat hij die dan ook opent? Weet niet waarom maar dat was het eerste wat ik deed..

[MsG]

Ik vind je idee best goed, alleen ben ik wel bang dat je op moet boksen tegen het feit dat bij bijna alle software e.d. de contextmenu's op de rechtermuisknop zitten.

Maar als ik FCK-editor gebruik, of een dergelijke WYSIWYG-web-tekst-editor mis ik inderdaad de functionaliteit om de spelling te controleren (wat Firefox heeft). Als ze echter het contextmenu aan jouw implementatie zouden hangen zou de tekstvakfunctionaliteit gewoon nog werken.

Zou persoonlijk de scrollknop inhouden ook wel prettig vinden, ipv de linkermuisknop.

[ Voor 9% gewijzigd door MsG op 24-03-2010 18:26 ]

[Verwijderd]

Verwijderd schreef op woensdag 24 maart 2010 @ 18:23:een mogelijkheid om het zo te maken dat als je de muis ingedrukt houdt, en loslaat op een item, dat hij die dan ook opent? Weet niet waarom maar dat was het eerste wat ik deed..

Geprobeerd, maar een mousemove event is niet te cancelen. Wel te detecteren, maar als het menu er eenmaal is, valt er weinig meer te doen tegen tekst selecteren.

[ Voor 15% gewijzigd door Verwijderd op 24-03-2010 19:39 ]

[Bozozo]

Waarom niet gewoon click+hold op de rechtermuisknop voor het custom menu. Dan blijft het browser contextmenu toegankelijk met een 'gewone' rechtermuisklik, terwijl je de gewoonte 'rechts klikken voor opties' niet doorbreekt.

[DanielG]

Bozozo schreef op donderdag 25 maart 2010 @ 08:43:
Waarom niet gewoon click+hold op de rechtermuisknop voor het custom menu. Dan blijft het browser contextmenu toegankelijk met een 'gewone' rechtermuisklik, terwijl je de gewoonte 'rechts klikken voor opties' niet doorbreekt.

Omdat je dan na de click+hold de rechter muisknop loslaat en de contextmenu boven de custom menu komt?

[Verwijderd]

Bozozo schreef op donderdag 25 maart 2010 @ 08:43:
Waarom niet gewoon click+hold op de rechtermuisknop voor het custom menu. Dan blijft het browser contextmenu toegankelijk met een 'gewone' rechtermuisklik, terwijl je de gewoonte 'rechts klikken voor opties' niet doorbreekt.

Control+click = rechtermuisknop bij OS X. Is dus geen optie.

[Ophidian]

Het werkt opzich ok, behalve als je het menu onderaan de pagina opent. Dan krijg je scrollbalken. Met een scrollwieltje kan je dan nog wel naar beneden scrollen, maar zodra je met de muisklik naar beneden wilt is je menu weer weg. Kan je niet zo maken dat hij onderaan de pagina het menu boven je mousepointer laat zien?

Ik weet het, ik wil weer lastig zijn

Edit: Getest onder Firefox btw...

[ Voor 4% gewijzigd door Ophidian op 25-03-2010 14:11 ]

[Verwijderd]

Er zijn trouwens zo veel sites waarbij je geen tekst kan selecteren, is zoiets niet te triggeren op 't moment dat je zo'n menu opent?

[Bozozo]

DanielG schreef op donderdag 25 maart 2010 @ 08:52:
[...]


Omdat je dan na de click+hold de rechter muisknop loslaat en de contextmenu boven de custom menu komt?

Die blokkeer je uiteraard.

[Verwijderd]

@Ophidian: kwestie van vooraf controleren of het geheel niet buiten document gaat vallen, en zo ja, positie aanpassen. Voert wat ver voor een proof of concept.

@GuidoH: is mij nog niet gelukt. Misschien eens naar zo'n site kijken om te zien hoe zij het flikken.

@Bozozo: Rechtermuisknopmenu blokkeren was dus precies waar ik dit alternatief voor had bedacht. Daarbij komt (in OS X in ieder geval) het rechtermuisknopmenu al meteen bij een mousedown tevoorschijn. Die valt na een vertraging dus niet meer te onderscheppen.

Het is trouwens jammer dat er niet een betrouwbare manier is om custom events in de DOM te registreren.

code:

node.addEventListener('clickhold', listener, false);

zou best vet zijn.

[ Voor 15% gewijzigd door Verwijderd op 25-03-2010 17:36 ]

[Bozozo]

Wat ik bedoel is bij mousedown (right) de timer starten. Heel kort? Dan niets speciaals doen (gewoon contextmenu openen). Langer? Dan gewone contextmenu blokkeren en custom menu tonen. Dat kan toch gewoon?

[orf]

Voor tekstselectie kun je het volgende doen:

JavaScript:

object.onselectstart = function () { return false; } // ie
object.onmousedown = function () { return false; } // other

Leuk concept!

[Verwijderd]

@Bozozo: in Mac OS X kont het rechtermuisknopmenu meteen bij mousedown tevoorschijn. Dus helaas, dat gaat niet.

[Tarilo]

Leuk idee. Alleen duurt het inderdaad wat lang voordat het menu tevoorschijn komt, maar dat is aan te passen.

[moozzuzz]

amaterasu schreef op woensdag 24 maart 2010 @ 10:07:
De proof of concept site werkt hier gewoon @ IE6 @ me stage hoor

hier niet ging uit van rightclick ipv click en ja dat werkt niet in IE (en niet in FF en de andere zooi :^) Leren lezen dus!

[ Voor 24% gewijzigd door moozzuzz op 30-03-2010 19:48 ]

[_Thanatos_]

Effe iets heel gevaarlijks: wat als je geen muis hebt of kan gebruiken, maar ook geen touchscreen hebt? Stel, je werkt met een telefoon die alleen een toetsenbord heeft en geen touchscreen? Of je bent motorisch gehandicapt en kunt alleen maar een toetsenbord(-achtig apparaat) bedienen?

Heb je daar ook over nagedacht? Ik denk dat het in zo'n situatie niet zo makkelijk duidelijk te maken is hoe je dat contextmenu tevoorschijn kan toveren. En je wilt natuurlijk ook met pijltjestoetsen en enter iets kunnen selecteren.

[Kiphaas7]

Werkt bij mij niet in opera 10.5, wel in ff3.6.

[Bosmonster]

ZpAz schreef op woensdag 24 maart 2010 @ 10:33:
Leuk... maar op de iPhone werkt het geheel dan weer niet. Er gebeurt niets.. denk dat dat bij andere toestellen hetzelfde zal zijn.

En met de opkomst van (mobiele) touch-interfaces is dat ook precies de reden dat ik zeg:

"Leuk idee, maar jaartje of 10 te laat."

[Soultaker]

Capital_G schreef op woensdag 24 maart 2010 @ 10:43:
Edit: Zie dat je de muis los moet laten, oops

Ja, dat vond ik ook tegenintuïtief. In normale context-menu's (en gewone menu's uit de menubalk die je wel met de linkermuisknop bedient) kun je wel gewoon slepen en pas loslaten op het item dat je wil activeren. Klikken en loslaten is voor bejaarden.

[ZpAz]

Verwijderd schreef op vrijdag 26 maart 2010 @ 14:14:
@Bozozo: in Mac OS X kont het rechtermuisknopmenu meteen bij mousedown tevoorschijn. Dus helaas, dat gaat niet.

edit: nvm, kan weg.

[ Voor 54% gewijzigd door ZpAz op 31-03-2010 11:40 ]