onClick 在移动设备上不起作用(触摸)
Posted
技术标签:
【中文标题】onClick 在移动设备上不起作用(触摸)【英文标题】:onClick not working on mobile (touch) 【发布时间】: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(侧栏上的高级搜索)
谢谢。
【问题讨论】:
【参考方案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>
【讨论】:
以上是关于onClick 在移动设备上不起作用(触摸)的主要内容,如果未能解决你的问题,请参考以下文章