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

Question

我们正在开发一个Web-App，在桌面和平板电脑（iPad、Android或Surface）上启动。现在我们正在构建适用于数字输入的自定义键盘。当您使用鼠标单击将焦点放在输入字段上时，自定义键盘会正确打开。但是，当您使用触摸单击（平板电脑）将焦点设置到输入时，默认键盘也会打开。我们的想法是检测是否有鼠标单击或触摸单击。如果是触摸单击，我们可以将readonly="true"属性设置为输入，这样在平板电脑上默认键盘就不会弹出。

请问是否有一种方法来检测或检查点击类型（触摸或鼠标）？

- webta.st.ic

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>

希望这可以帮助到您。

- Zakaria Acharki

---

嗨Zakaria :)首先感谢你的快速回答，我尝试了你的代码。我只是将id更改为class，并将该class添加到两个输入中，并将console.log打印更改为alert以查看平板电脑上发生了什么。 在桌面上，它运行良好。在我点击输入后，屏幕上会出现警报“鼠标单击”。在平板电脑上，首先出现提示“触摸”，然后关闭后，第二个警报“鼠标单击”也出现在屏幕上。我认为在触摸事件之后，它还会发送一个单击事件。我尝试在提示“触摸”后使用e.preventDefault，但没有帮助。你有什么想法吗？ - webta.st.ic

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”

- webta.st.ic

---

在onclick中使用"touchend"而不是"touchstart" :) - webta.st.ic

触摸事件也会触发点击事件。点击事件会在touchstart或touchend事件之后发生。因此，在点击事件发生之前检测touchend并使用preventDefault()来防止其发生。 - Marty.H