onClick 不适用于移动设备(触摸)

IT技术 javascript jquery mobile safari onclick
2021-02-05 17:37:10

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

您可以在此处查看工作示例(侧栏上的高级搜索)

谢谢。

3个回答

最好将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()不等待页面上的每个元素先加载的方法。

奇迹般有效!
2021-03-15 17:37:10
@landed 我想touchstart可以在触摸设备上使用,所以我认为click在触摸设备上不会有任何问题
2021-03-23 17:37:10
检查您是否没有同时使用 click 和 touchstart 触发 2 个事件。
2021-03-25 17:37:10
非常感谢。奇迹般有效。
2021-03-28 17:37:10
您可能是对的,但如果您正在使用模拟触摸的桌面进行开发,那么这可能是您的应用程序中的一个问题,然后知道这可能是我提到它的原因。我现在更喜欢使用小锤子库来获取移动事件。
2021-03-29 17:37:10

您可以使用而不是单击:

$('#whatever').on('touchstart click', function(){ /* do something... */ });
请注意:对于同时触发两个事件的设备或在 chrome 开发工具中,此代码将触发两次,而移动设备模拟视图
2021-04-03 17:37:10

我也不知道为什么,但这两个按钮在 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>