onClick 在移动设备上不起作用（触摸）答案

【问题标题】：onClick not working on mobile (touch)onClick 在移动设备上不起作用（触摸）
【发布时间】：2014-02-25 13:40:21
【问题描述】：

好的，当用户单击列表项时，我试图做的是向下滑动 div。

问题是我正在使用 Selectric https://github.com/lcdsantos/jQuery-Selectric 将选择框转换为无序列表。因此，当用户单击源输出为列表项的 a 时，我希望 div 向下滑动。

在移动 Safari (iOS7) 上，选择框 UI 与标准选择框 UI 相同。

关于移动设备的 onClick 最佳做法是什么？

基本 jquery：

$(window).load(function() {
        $('.List li').click(function() {
            $('.Div').slideDown('500');
        });
    });

您可以看到一个工作示例HERE（侧栏上的高级搜索）

谢谢。

【问题讨论】：

标签： javascript jquery mobile safari onclick

【解决方案1】：

最好使用touchstart 事件和.on() jQuery 方法：

$(window).load(function() { // better to use $(document).ready(function(){
    $('.List li').on('click touchstart', function() {
        $('.Div').slideDown('500');
    });
});

我不明白你为什么使用$(window).load() 方法，因为它等待页面上的所有内容被加载，这往往很慢，而你可以使用不等待每个元素的$(document).ready() 方法在要首先加载的页面上。

【讨论】：

非常感谢。像魅力一样工作。
检查您是否没有使用 click 和 touchstart 触发 2 个事件。
@landed 我猜touchstart 在触控设备上工作，所以我认为click 在触控设备上不会有任何问题。
您可能是对的，但是如果您正在使用模拟触摸的桌面进行开发，那么这可能是您的应用程序中的一个问题，然后知道这可能就是我提到它的原因。我现在更喜欢小锤子库来获取移动事件。
像魅力一样工作！

【解决方案2】：

你可以使用而不是点击：

$('#whatever').on('touchstart click', function(){ /* do something... */ });

【讨论】：

请注意：对于同时触发了两个事件或在 chrome 开发工具中的设备，此代码将触发两次，而移动设备模拟视图

【解决方案3】：

我也不知道为什么，但是这2个按钮在ipad safari上不能点击。

<div class="col-md-6 text-center">
  <h3>Title</h3>
  <div class="col-xs-12">
    <div class="panel panel-default">
      <div class="pd20 bg">
        <h4 class="title">House</h4>
      </div>
      <div class="panel-footer text-center">
        <button type="button" class="btn btn-warning btn-sm" ng-click="vm.clear()">
          <i class="fa fa-edit" aria-hidden="true"></i> Clear</button>
        <button type="button" class="btn btn-warning btn-sm" ng-click="vm.submit()">
          <i class="fa fa-edit" aria-hidden="true"></i> Submit</button>
      </div>
    </div>
  </div>
</div>

但是如果我这样修复它，它可以被点击

<div class="col-md-6 text-center">
  <h3>Title</h3>
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default">
        <div class="pd20 bg">
          <h4 class="title">House</h4>
        </div>
        <div class="panel-footer text-center">
          <button type="button" class="btn btn-warning btn-sm" ng-click="vm.clear()">
            <i class="fa fa-edit" aria-hidden="true"></i> clear</button>
          <button type="button" class="btn btn-warning btn-sm" ng-click="vm.submit()">
            <i class="fa fa-edit" aria-hidden="true"></i>Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：