在移动设备上，点击事件（onClick）无法正常工作（触摸）。

Question

好的，我想要做的是在用户点击列表项时向下滑动一个div。

问题是我正在使用Selectric https://github.com/lcdsantos/jQuery-Selectric ，它将选择框转换为无序列表。所以当用户点击源代码输出为列表项的 时，我希望一个 div 向下滑动。

在移动 Safari（iOS7）中，选择框 UI 与标准选择框 UI 相同。

在移动设备上，关于 onClick 的最佳实践是什么？

基本的 jquery：

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

你可以在边栏上的“高级搜索”中查看一个工作示例，链接在这里。

谢谢。

- Dale

Answer 1

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

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

我不明白为什么您在使用$(window).load()方法，因为它会等待页面上的所有内容都加载完毕，这会导致速度变慢。相比之下，您可以使用$(document).ready()方法，它不需要等待页面上的每个元素都加载完毕。

- Jai

---

请检查使用click和touchstart时是否会触发两个事件。 - landed

@landed 我猜 touchstart 在触摸设备上可以工作，所以我认为在触摸设备上使用 click 不会有任何问题。 - Jai

你可能是对的，但如果你正在使用桌面模拟触摸来开发应用程序，那么这可能会成为一个问题，所以我提到了这一点。现在我更喜欢使用小锤子库来获取移动事件。 - landed

Answer 2

您可以使用 "点击" 的替代词：

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

- Ram Patidar

---

注：这段代码会在一个同时触发两个事件的设备或在 Chrome 开发工具中模拟移动视图时触发两次。 - wick3d

Answer 3

我也不知道为什么，在 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>

- Tính Ngô Quang