web-dev-qa-db-fra.com

Détecter si l'entrée a été touchée (tablette) ou cliquée (souris)

Nous développons une application Web qui se lance sur le bureau et sur les tablettes (iPad, Android ou une surface). Nous construisons maintenant notre propre clavier pour les entrées numériques. Lorsque vous définissez le focus sur un champ de saisie avec un clic de souris, le clavier du costum s'ouvre correctement. Mais lorsque vous définissez le focus sur l'entrée avec un clic touché (tablette), le clavier par défaut s'ouvre également. Notre idée est de détecter s'il y a eu un clic de souris ou un clic touché. S'il s'agit d'un clic touché, nous pouvons définir l'entrée readonly = "true" , de sorte que le clavier par défaut d'un tableau ne glisse pas.

Existe-t-il un moyen de détecter ou de vérifier le "type" de clic (touché ou souris)?.

javascripthtmlkeyboardclickdetect
7
MrBuggy

Vous pouvez définir un événement pour les deux actions touchend et click, puis détecter celle qui est déclenchée à l'aide du type d'événement:

$('#element-id').on('click touchend',function(e){
  if(e.type=='click')
      console.log('Mouse Click');
  else
      console.log('Touch');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="element-id">Click here</button>

J'espère que cela t'aides.

8
Zakaria Acharki

@Zakaria Acharki

        <script type="text/javascript">
        $(document).ready(function(){
            $(".cCostumeKeyboard").on("click touchstart",function(e){
                if(e.type=="click") {
                    alert("Mouse");
                    alert(e.type);
                }
                else if(e.type=="touchend"){
                    alert("Touch");
                    alert(e.type);
                    e.preventDefault();
                    e.stopPropagation();
                }
            }); 
        });
    </script>

Essayez cet extrait sur un périphérique tactile. Il montre après le premier contact sur une entrée suivre:

  • Alerte: "Touches"
  • Alerte: "touchend"
  • Alerte: "Souris"
  • Alerte: "clic"
1
MrBuggy