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

Question

好吧，我想做的是当用户单击列表项时向下滑动 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');
        });
    });

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

谢谢。

Answer 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()

方法，它不等待页面上的每个元素首先加载页面。

Answer 2

您可以使用代替点击：

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

Answer 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>

Answer 4

我发现 onClick / click 在三星浏览器上不起作用。我将其添加到代码的底部，它适用于触摸和桌面。我发现通过添加事件监听器有助于触发事件。

如果为您的按钮添加两个侦听器（一个用于触摸，另一个用于桌面），您也可以

• 在被调用的函数中添加一个静态变量来检查它是否有 已经被叫到了
• 添加两个在触摸/桌面上均不会触发的互斥事件，例如移动设备上按钮的 touchend 事件和桌面上按钮的 click
• 检查之前的状态是否与当前状态相同，以及是否进一步取消。对于我的示例，这将涉及使用一个变量来保持最后一个 myButton.value 的作用。

向元素添加事件

let myButton = document.querySelector('.button-class');  
    
// desktop
    myButton.addEventListener('click', function (ev) {   
            myFunction(myButton.value); 
        }
// touch
    myButton.addEventListener('touchend', function (ev) {   
            myFunction(myButton.value); 
        }

    );