touch en mouse event tegelijk

Status
Niet open voor verdere reacties.
B

backnext

Gebruiker
Lid geworden
29 apr 2016
Berichten
176
Hallo,
Ik maak een website die zowel op desktop als op tablet zal gebruikt worden. Dus zowel met mouse als met touch events zal bediend worden.
Uit 'internetlectuur' blijkt dat hier risico's aan verbonden zijn. Na wat experimenteren kwam ik tot onderstaande resultaat.
Ik wil dit nu op alle touch en mouse events toepassen.
Dit is redelijk wat werk dus wil ik eerst jullie mening hierover.
Is dit velig (tot nu toe ervaar ik geen probleem in de 2 situaties)?
Zijn er eenvoudiger oplossingen? Of moet het nog uitgebreider?
Ik weet dat dit niet zal werken op enkele oudere browsers maar de website is voor een beperkt publiek...
(css werkt niet wegens deel weggelaten en self.close() zal enkel werken als deze file opgestart is door de website...)

HTML: 
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <a class="w3-right w3-text-red w3-xxlarge w3-hover-text-green w3-margin" id="idSluit">❌</a>
    <script>

    document.getElementById("idSluit").addEventListener("touchstart", function () {
    self.close();
    evt.preventDefault();
    });
    document.getElementById("idSluit").addEventListener("mousedown", function () {
    self.close();
    evt.preventDefault();
    });

    </script>

</body>
</html>
 
Omdat het doel niet bekend is kan ik er weinig over zeggen. Zoals het nu is krijg ik een popup met de vraag "of ik het tabblad wil sluiten".
Hieronder een alternatief voor je code:
Code: 
var Elm = document.getElementById("idSluit");
Elm.addEventListener("mousedown", TouchMouse, false);
Elm.addEventListener("touchstart", TouchMouse, false);
function TouchMouse(event) {
   window.close();
   event.preventDefault();
}

Of gewoon
Code: 
<a href="javascript:" onclick="window.close();return false;">Sluit</a>
href="javascript:" doet hetzelfde als href="javascript:void(0)".

Suc6.
 
Laatst bewerkt:
Bedankt bron. Dat werkt goed maar wat doe ik verkeerd in onderstaande code? (deze keer met duidelijker doel: geluid spelen via link.)
Onclick op touchscreen werkt niet goed genoeg voor mijn 'publiek'. Ze hebben de neiging om heel hard en lang op het scherm te duwen en onclick werkt dan soms niet. Vandaar de combinatie van mousedown en touchstart...

HTML: 
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>OEFEN</title>
    <!--not zooming to prevent delay-->
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>

<body oncontextmenu="return false;">

    <p id="demo"></p>
    <div onselectstart="return false;" class="unselectable">
        <div class="w3-container">
            <div class="w3-row-padding">
                <h1>
                    <a class="w3-container w3-btn-block w3-ripple w3-red" id="id1">1</a>
                    <a class="w3-container w3-btn-block w3-ripple w3-yellow" id="id2">2</a>
                    <a class="w3-container w3-btn-block w3-ripple w3-green" id="id3">3</a>
                </h1>
            </div>
        </div>
    </div>

    <script>
//*** 1
   
        var Elm = document.getElementById("id1");
        var geluid = new Audio();
        geluid.src = 'http://soundbible.com/mp3/sms-alert-3-daniel_simon.mp3';
        Elm.addEventListener("mousedown", TouchMouseGeluid, false);
        Elm.addEventListener("touchstart", TouchMouseGeluid, false);

//*** 2
       
        var Elm = document.getElementById("id2");
        var geluid = new Audio();
        geluid.src = 'http://soundbible.com/mp3/sms-alert-4-daniel_simon.mp3';
        Elm.addEventListener("mousedown", TouchMouseGeluid, false);
        Elm.addEventListener("touchstart", TouchMouseGeluid, false);
    
//*** 3

        var Elm = document.getElementById("id3");
        var geluid = new Audio();
        geluid.src = 'http://soundbible.com/mp3/sms-alert-5-daniel_simon.mp3';
        Elm.addEventListener("mousedown", TouchMouseGeluid, false);
        Elm.addEventListener("touchstart", TouchMouseGeluid, false);

//*** function
        function TouchMouseGeluid(event) {
            geluid.play();
            event.preventDefault();
        }
 
    </script>

</body>
</html>
 
Laatst bewerkt:
div onselectstart is niet van toepassing (alleen oude IE 8) en werkt niet in Firefox en Opera.
body oncontextmenu kan je wel gebruiken, dat werkt in elke browser.
Het script heb ik wat simpeler gemaakt. Met wat css worden een aantal ongewenste effecten weggehaald. Blijft nog 1 puntje over... als je heel lang drukt gebeurt er niets (ook geen geluid). Ik weet niet hoe de gebruikers hiermee omgaan? Drukken ze nog harder of laten ze het even los om het opnieuw te proberen?
Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>OEFEN</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style type="text/css">
html, body, * {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   -webkit-appearance: none;
}
.w3-btn-block {
   cursor: pointer;
}
</style>
</head>
<body oncontextmenu="return false;">
<audio id="audioplayer" style="display:none;" preload="none">
Als u dit leest heeft uw browser geen support voor het geluid
</audio>
<p id="demo"></p>
<div class="unselectable">
   <div class="w3-container">
      <div class="w3-row-padding">
         <div class="w3-container w3-btn-block w3-ripple w3-red w3-margin-top" onClick="AudioPlay('audio-1-bestand.mp3')">
            <h1>Audio 1</h1>
         </div>
         <div class="w3-container w3-btn-block w3-ripple w3-yellow w3-margin-top" onClick="AudioPlay('audio-2-bestand.mp3')">
            <h1>Audio 2</h1>
         </div>
         <div class="w3-container w3-btn-block w3-ripple w3-green w3-margin-top" onClick="AudioPlay('audio-3-bestand.mp3')">
            <h1>Audio 3</h1>
         </div>
         <div class="w3-container w3-btn-block w3-ripple w3-blue w3-margin-top" onClick="AudioPlay('')">
            <h1>Geluid uit</h1>
         </div>
      </div>
   </div>
</div>
<script>
function AudioPlay(source) {
   Elm = document.getElementById('audioplayer');
   Elm.src=source;
   if (source == '') Elm.stop(); else Elm.play();
}
</script>
</body>
</html>
Suc6.
 
Laatst bewerkt:
Nog eens bedankt voor de tips. Ik moet alles nog eens in detail bekijken maar die onclick is toch nog een probleem bij de gebruikers. Ik stond er een tijdje geleden toen ik het voor het eerst uittestte van te kijken dat dat probleem zich voordeed. Maar dat is vooral denk ik doordat ik (wij) de omgang met een touchscreen al zo gewend zijn. Je moet je echt voorstellen dat veel (niet alle) gebruikers op het scherm duwen alsof ze op een deurbel drukken (en ik overdrijf niet)!
Dus zou ik toch terug willen naar het systeem waar mousedown en touchstart worden gecombineerd. Daarbij zie ik, na testen bij verschillende mensen dat die mousedown echt veel beter werkt ('wat misschien ook wel logisch is, het is er voor gemaakt.) Op deze manier hebben ze succeservaring in plaats van de frustratie van telkens opnieuw te moeten proberen.
 
Tja, er zullen vast wel mensen zijn die "deurbel touch" vingers hebben maar misschien ligt dat aan de tablet of smartphone die niet comfortabel werkt of aan een slechte Wi-Fi verbinding. Het overgrote deel van de gebruikers gaat echt wel goed om met een touchscreen. Of gaat het hier om een medische groep mensen die aangepaste bediening nodig heeft?

Als je iets laat gebeuren bij touchstart dan volgt er altijd een touchend event (bij het loslaten) en deze 2 samen geven altijd een click event. En dan zijn er vast nog wel gebruikers die hun vinger iets verschuiven en dan krijg je alle drag events. Hoeveel events wil je afvangen en daarmee de bediening af laten wijken van "de standaard"? Je kunt er ook vanuit gaan dat steeds meer mensen goed met een touchscreen omgaan. Bij mijn websites heb ik nog nooit vragen gehad over bediening op smartphone of tablet.
 
Laatst bewerkt:
bron, ik begrijp je volledig. ..."deurbel touch"... :) maar nee, geen slechte wifi of tablet, allemaal grondig onderzocht. Het verschil tussen mousedown en touchstart is opvallend.
"Het overgrote deel van de gebruikers gaat echt wel goed om met een touchscreen" Jazeker maar dat is het nu net: Mijn gebruikers zijn mensen met een mentale handicap waarvan de meesten niet met een muis kunnen werken maar wel kunnen duwen op dat scherm en dus een of andere response krijgen die dan een meerwaarde biedt op een of andere manier. En daarbij gaat het om heel eenvoudige zaken als een leuk geluidje of een stem die iets zegt...een visueel effect... En ik wil ook de mensen bereiken die een mentale leeftijd hebben van een paar maand... Gewone websites zijn natuurlijk wel te bedienen met onclick. Iedere bezoeker zal met een minimaal contact met de vinger op het scherm een 'event' veroorzaken. Geen probleem.
Ik merk dat touchstart enorm snel een reponse geeft. Onclick wacht nog eventjes om te zien of er geen double click komt... en daar gaat het volgens mij fout bij mijn 'gebruikers'. Ik ga er van uit dat mousedown en touchstart gecombineerd nodig zijn voor mijn situaties. Boeiende materie in ieder geval.
 
beste bron, Ik heb aan je laatste voorstel ontouchstart toegevoegd. De "deurbeltouch" is nu geen probleem meer. Zie ik iets over het hoofd of kan het op deze manier?

HTML: 
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>OEFEN</title>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <style type="text/css">
        html, body, * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-appearance: none;
        }

        .w3-btn-block {
            cursor: pointer;
        }
    </style>
</head>
<body oncontextmenu="return false;">
    <audio id="audioplayer" style="display:none;" preload="none">
        Als u dit leest heeft uw browser geen support voor het geluid
    </audio>
    <p id="demo"></p>
    <div class="unselectable">
        <div class="w3-container">
            <div class="w3-row-padding">
                <div class="w3-container w3-btn-block w3-ripple w3-red w3-margin-top" ontouchstart="AudioPlay('../../sp_sounds/lach.mp3'); event.preventDefault()" onClick="AudioPlay('../../sp_sounds/lach.mp3'); event.preventDefault()">
                    <h1>Audio 1</h1>
                </div>
                <div class="w3-container w3-btn-block w3-ripple w3-yellow w3-margin-top" ontouchstart="AudioPlay('../../sp_sounds/lach2.mp3'); event.preventDefault()" onClick="AudioPlay('../../sp_sounds/lach2.mp3'); event.preventDefault()">
                    <h1>Audio 2</h1>
                </div>
                <div class="w3-container w3-btn-block w3-ripple w3-green w3-margin-top" ontouchstart="AudioPlay('../../sp_sounds/lach3.mp3'); event.preventDefault()" onClick="AudioPlay('../../sp_sounds/lach3.mp3'); event.preventDefault()">
                    <h1>Audio 3</h1>
                </div>
                <div class="w3-container w3-btn-block w3-ripple w3-blue w3-margin-top" ontouchstart="AudioPlay(''); event.preventDefault()" onClick="AudioPlay(''); event.preventDefault()">
                    <h1>Geluid uit</h1>
                </div>
            </div>
        </div>
    </div>
    <script>
function AudioPlay(source) {
   Elm = document.getElementById('audioplayer');
   Elm.src=source;
   if (source == '') Elm.stop(); else Elm.play();
}
    </script>

</body>
</html>
 
Probeer altijd style en html en script van elkaar te scheiden. Hier is gebruik gemaakt van twee listeners die in een for loop op elke class "mp3-btn" staan. Je hebt wel bij tablets en smartphones een ander probleem namelijk dat de draadloze overdracht van een wat groter mp3 bestand op zich laat wachten. Gedurende die tijd zal de gebruiker hard op het scherm drukken. Bij een pc net netwerkkabel heb je hier geen last van.
Code: 
<audio id="audioplayer" style="display:none;" preload="none">
Helaas heeft uw browser geen audio support
</audio>
<div class="unselectable">
  <div class="w3-container">
    <div class="w3-row-padding">
      <div class="w3-container w3-btn-block w3-ripple w3-red w3-margin-top mp3-btn" data-audio="lach1.mp3">
        <h1>Audio 1</h1>
      </div>
      <div class="w3-container w3-btn-block w3-ripple w3-yellow w3-margin-top mp3-btn" data-audio="lach2.mp3">
        <h1>Audio 2</h1>
      </div>
      <div class="w3-container w3-btn-block w3-ripple w3-green w3-margin-top mp3-btn" data-audio="lach3.mp3">
        <h1>Audio 3</h1>
      </div>
      <div class="w3-container w3-btn-block w3-ripple w3-blue w3-margin-top mp3-btn" data-audio="">
        <h1>Geluid uit</h1>
      </div>
    </div>
  </div>
</div>
<script>
function AudioPlay(mp3file) {
  var Elm = document.getElementById('audioplayer');
  Elm.src=mp3file;
  if (mp3file == '') Elm.stop(); else Elm.play();
}
var Elms = document.getElementsByClassName("mp3-btn");
var Source, i;
for (i = 0; i < Elms.length; i++) {
  //touchstart,touchmove,touchend,touchenter,touchleave,touchcancel
  Elms[i].addEventListener('touchstart', function(event) {
    Source = this.dataset.audio;
    AudioPlay(Source);
    event.preventDefault();
  }, false);
  Elms[i].addEventListener('click', function(event) {
    Source = this.dataset.audio;
    AudioPlay(Source);
    event.preventDefault();
  }, false);
}
</script>
Suc6. Have fun.
 
Laatst bewerkt:
Dat is helemaal wat ik zocht. Zelf ook geprobeerd met een lus maar mijn javascript kennis gaat niet ver genoeg.
Die mp3tjes zijn heel kort en laden vrij vlug. Ik gebruik ze enkel op dit oefenblad. Hard duwen is geen enkel probleem meer.
Ik zal enkel nog wat moeten zoeken om het scrollen op te vangen want nu is er een response bij iedere aanraking en dus ook bij schuiven met de vinger: 'touchmove'.
Heel erg bedankt.
 
Graag gedaan.
Code: 
document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);
 
bedankt bron
binnen de lus is het scrollen hierdoor niet meer mogelijk en buiten de lus wel tot er een 'touch' komt, dan weer niet meer.
Zou dit niet als een voorwaarde aan de for-lus kunnen gekoppeld worden? Als er gescrold wordt, blijf dan uit de lus?
 
ik gebruik nu touchend ipv touchstart. Werkt op het eerste zicht ook heel goed voor 'deurbellers' maar touchmove is nog mogelijk.
 
Het lukt mij niet wat je omschrijft te reproduceren. Ik heb de regels van post #11 boven deze regel ingevoegd:
Code: 
var Elms = document.getElementsByClassName("mp3-btn");
Bij mij werkt het op een smartphone goed, zelfs als ik veel tekst onder de knoppen zet zodat de pagina langer is dan het display. Kun je aangeven wat je doet zodat het is te reproduceren?
 
wel ja, dat heb ik nu op allerhande manieren getest en scrollen lukt niet zo. Hieronder nog eens alles bij elkaar:

HTML: 
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>OEFEN</title>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <style type="text/css">
        html, body, * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-appearance: none;
        }

        .w3-btn-block {
            cursor: pointer;
        }
    </style>
</head>
<body oncontextmenu="return false;">
    <audio id="audioplayer" style="display:none;" preload="none">
        Helaas heeft uw browser geen audio support
    </audio>
    <div class="unselectable">
        <div class="w3-container">
            <div class="w3-row-padding">
                <div class="w3-container w3-btn-block w3-ripple w3-red w3-margin-top mp3-btn" data-audio="../../sp_sounds/lach1.mp3">
                    <h1>Audio 1</h1>
                </div>
                <div class="w3-container w3-btn-block w3-ripple w3-yellow w3-margin-top mp3-btn" data-audio="../../sp_sounds/lach2.mp3">
                    <h1>Audio 2</h1>
                </div>
                <div class="w3-container w3-btn-block w3-ripple w3-green w3-margin-top mp3-btn" data-audio="../../sp_sounds/lach3.mp3">
                    <h1>Audio 3</h1>
                </div>
                <div class="w3-container w3-btn-block w3-ripple w3-blue w3-margin-top mp3-btn" data-audio="">
                    <h1>Geluid uit</h1>
                </div>
            </div>
        </div>
    </div>
   tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
    tekst
    <br><br><br><br>
   

    <script>
function AudioPlay(mp3file) {
  var Elm = document.getElementById('audioplayer');
  Elm.src=mp3file;
  if (mp3file == '') Elm.stop(); else Elm.play();
}

document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);

var Elms = document.getElementsByClassName("mp3-btn");
var Source, i;
for (i = 0; i < Elms.length; i++) {
  //touchstart,touchmove,touchend,touchenter,touchleave,touchcancel
  Elms[i].addEventListener('touchstart', function(event) {
    Source = this.dataset.audio;
    AudioPlay(Source);
    event.preventDefault();
  }, false);
  Elms[i].addEventListener('click', function(event) {
    Source = this.dataset.audio;
    AudioPlay(Source);
    event.preventDefault();
  }, false);
}
    </script>

</body>
</html>
 
Ik zal enkel nog wat moeten zoeken om het scrollen op te vangen
Klik om te vergroten...
Ik denk dat ik je "touch move" vraag niet goed heb begrepen.
Touch move is nu bewust uitgezet voor de body (alles dus) in het gedeelte
document.body.addEventListener('touchmove' ........

De uitleg van de andere aanpassingen:

no touch & hold feature
-webkit-touch-callout: none;

no select text feature
*-user-select: none;

no platform-native styling
-webkit-appearance: none;

show "hand" icon on mouse-over
cursor: pointer;

start audio on touchstart
Elms.addEventListener('touchstart'

start audio on mouse click
Elms.addEventListener('click'
 
Laatst bewerkt:
Ach, ok. Misverstandje. Ik heb me misschien verkeerd uitgedrukt met "om het scrollen op te vangen ".
Ik bedoel dat het wel nog mogelijk moet zijn om te scrollen maar door de touchstart wordt de link naar het geluidje onmiddellijk gestart bij de minste aanraking.
Scrollen is dus niet meer mogelijk. Daarom had ik bij #13 touchend ipv touchstart gebruikt wat wel goed lijkt te werken (ik wil het nog wel uittesten met de gebruikers) en scrollen is dus wel nog mogelijk omdat de aanraking nog niet gestopt is (touchend) tijdens het 'schuiven'.
Maar nu weet ik hoe touch move (en andere...) moet uit gezet worden. Komt later nog wel van pas...
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan