Welk html Event wordt best gebruikt bij klikken (duwen) op touchscreen?

Status
Niet open voor verdere reacties.
B

backnext

Gebruiker
Lid geworden
29 apr 2016
Berichten
176
Ik werk met personen met een mentale handicap en maak een eenvoudige webpagina (met html en javascript) voor hen.
De link naar die webpagina zet ik in een kiosk app (fully kiosk browser) (voor op tablet)
Er zijn knoppen te zien waarop geklikt kan worden.
Ik gebruik hiervoor het "onclick" event (ik gebruik dezelfde webpagina ook gewoon op scherm met muis).
Nu is het zo dat veel van mijn "gebruikers" niet zoals de meesten zachtjes tikken op een touchscreen maar er hard en lang op duwen zoals op een echte knop.
Daarbij werkt de onclick event niet altijd. ontouch wil ik liever niet gebruiken omdat ik dezelfde code ook gebruik in een "normale website".
Of is het een goed idee om onclick, ontouch, onmousedown, onmousemove, onmouseup en zo te combineren om het "duwen" "op te vangen"?
 
Ideetje, ik weet niet of je er iets mee kunt

onmousedown
- element andere kleur (gebruiker weet dat er wat gebeurt)
- disable element (om meerdere events te voorkomen)
onmouseup
- element oorspronkelijke kleur (voor gebruiker)
- enable element (element weer actief)

Suc6 met je script.
 
bron, bedankt voor de tip, ik probeer het eens. Maar het is alsof het touchscreen niet werkt bij hard duwen...
 
Bij deze "gebruikers" is visuele terugkoppeling misschien belangrijk. Als de knop bij een :active een overdreven 3d effect heeft dat hij is ingedrukt dan wordt er misschien minder lang én minder hard gedrukt. Denk aan knopschaduw, randkleur, knopkleur, knopgrootte, enzo. Bij een :hover kan je het dan houden bij een kleurverandering, meer niet.
 
Kan dat er in onderstaande code toegevoegd worden of moet ik naar een functie verwijzen?

HTML: 
 <img src="img/snoezelen.jpg" style="width:100%" onclick="snoezelen()">
 
Ik begrijp je laatste vraag niet helemaal maar in de css kan je terugkoppeling doen naar de gebruiker.
Of ligt het probleem ergens anders?
Code: 
html:

<div class="btn-box">
<div class="btn-overlay"></div>
<img src="button-foto.jpg" alt="" />
</div>

css:

.btn-box, .btn-box * {
  display: block;
  border-radius: 8px;
}
.btn-box {
  position: relative;
  width: 84px;
}
.btn-box div {
  position: absolute;
  top: 2px; right: 2px; bottom: 2px; left: 2px;
}
.btn-box div:hover {
  background: #aaa;
  opacity: 0.2;
  box-shadow: 0 4px 3px #000;
}
.btn-box div:active {
  background: #2c2;
  opacity: 0.5;
  box-shadow: none;
}
.btn-box img {
  width: 100%;
  height: auto;
}
Suc6. Have fun.
 
Laatst bewerkt:
Ja, bedankt, werkt goed bij mijn schermpjes. Ik test het morgen uit bij "gebruikers"
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan