检测输入是被触摸（平板电脑）还是被点击（鼠标）

Question

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

有没有办法检测或检查"type" 的点击是（触摸还是鼠标）。

Answer 1

您可以为 touchend 和 click 这两个动作定义一个事件，然后使用事件类型检测哪个被触发：

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

希望对您有所帮助。

Answer 2

@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>

在触摸设备上试试这个片段。它在第一次触摸输入后显示如下：

警报："Touches"
警报："touchend"
警报："Mouse"
警报："click"

检测输入是被触摸（平板电脑）还是被点击（鼠标）

Detect if input was touched (tablet) or clicked (mouse)

html

javascript

keyboard

click

detect