检测输入是否被触摸（平板电脑）或单击（鼠标） [英] Detect if input was touched (tablet) or clicked (mouse)

问题描述

我们正在开发一个Web应用程序，该应用程序可在台式机和平板电脑（iPad，Android或Surface）上启动。现在，我们正在构建自己的数字输入键盘。当您使用mousclick将焦点设置在输入字段上时，costum键盘会正确打开。但是，当您通过触摸单击（平板电脑）将焦点设置为输入时，默认键盘也会同时打开。我们的想法是检测是否有鼠标单击或触摸的单击。如果是感人的点击，我们可以将 readonly = true 属性设置为输入，以便桌面上的默认键盘不会滑入。

是否可以检测或检查单击的类型（触摸或鼠标）。

解决方案

您可以同时为 touchend 和 click 这两个动作定义一个事件，然后使用事件：

< pre class = snippet-code-js lang-js prettyprint-override> $（'＃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>点击此处< / button>  

希望这会有所帮助。

We are developing a Web-App, which launches on Desktop and on tablets (iPad, Android or a surface). Now we are building our own keyboard for number inputs. When you set the focus on an input field with a mousclick, the costum keyboard opens correct. But when you set the focus to the input with a touched click (tablet), the default keyboard opens also. Our idea is, to detect, if there was a mouse-click or a touched click. If it's a touched click, we can set the readonly="true" property to the input, so the default keyboard on a tabled wouldn't slide in.

Is there a way to detect or check which "type" of click it was (touched or mouse).

解决方案

You can define an event for the both actions touchend and click then detect which one is triggered using type of the event :

$('#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>

Hope this helps.

这篇关于检测输入是否被触摸（平板电脑）或单击（鼠标）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！