javascript - 谷歌浏览器 - 这是 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");
});

这不应取代正常的“点击”事件，但应与它一起添加。

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

如果您需要更多信息，那么您可能会发现这很有帮助:https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

编辑:

native JavaScript 实现可能如下所示:

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

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

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