Google Chrome - 这是一个BUG吗？ Javascript 问题？触摸屏输入不工作

Question

我有这个简单的按钮。它在同一台机器上通过 USB 鼠标点击工作，但通过触摸屏（Iiyama 触摸屏）点击时不起作用。

<script>
function button_vipanytime() {
  console.log('OK we clicked');
  alert('Touch screen works');// using mouse I get the alert, but when I tap with touchscreen it never executes.

}

/* fail too
$(document).ready(function() {
  $('#vip_anytime').click(function() { 
    alert('jquery');  
  });
});
*/
</script>

<div id="vip_anytime" style="" onclick="button_vipanytime(); " >
    <img src="images/sp/vip.png"  style="width:70px; height: 48px;" />
</div>

如何让它与触摸输入兼容？

Answer 1

由于另一组事件支持屏幕触摸，因此您应该为基于触摸的事件添加侦听器。试试这个：

$("#vip_anytime").on("touchend", function(e){
 alert("OK we touched");
});

这不应取代正常的 "click" 事件，但应与它一起添加。

$("#vip_anytime").on("click touchend", function(e){
   alert("OK we touched");
});

如果您需要更多信息，那么您可能会发现以下内容对您有所帮助：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

编辑：

本机 JavaScript 实施可能如下所示：

document.getElementById("vip_anytime").addEventListener("touchend", function(e) {
  alert("OK we touched");
});

最后，虽然这不是最佳实践，但您可以直接在 HTML 代码中调用它，如您的代码示例所示：

<div id="vip_anytime" ontouchend="button_vipanytime();">click me</div>

Google Chrome - 这是一个BUG吗？ Javascript 问题？触摸屏输入不工作

Google Chrome - is this a BUG? Javascript issue? Touchscreen inputs are not working

javascript

jquery

windows

google-chrome

touch