onClick不在手机上工作(触摸)

时间:2014-02-25 13:40:22

标签: javascript jquery mobile safari onclick

好的,我尝试做的是在用户点击列表项时滑动div。

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

在移动版Safari(iOS7)中,selectbox UI与标准选择框UI相同。

onClick for mobile devices的最佳做法是什么?

基本jquery:

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

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

感谢。

3 个答案:

答案 0 :(得分:75)

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

答案 1 :(得分:6)

您可以使用而不是点击:

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

答案 2 :(得分:0)

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