我正在开发一个必须在各种设备上运行的移动网站.黑莓手机让我头疼的是黑莓.
我们需要支持键盘点击和触摸事件.
理想情况下,我只是使用:
$thing.click(function(){...})
Run Code Online (Sandbox Code Playgroud)
但我们遇到的问题是,这些黑莓设备中的一些从触摸到触发点击时会有非常烦人的延迟.
解决方法是改为使用touchstart:
$thing.bind('touchstart', function(event){...})
Run Code Online (Sandbox Code Playgroud)
但是,如何绑定这两个事件,但只触发一个?我仍然需要键盘设备的click事件,但当然,如果我使用触摸设备,则不希望点击事件触发.
一个额外的问题:是否有这样做,另外还适用于甚至没有touchstart事件的浏览器?在研究这个问题时,看起来BlackBerry OS5不支持touchstart,因此还需要依赖该浏览器的点击事件.
附录:
也许更全面的问题是:
使用jQuery,是否可以/建议使用相同的绑定处理触摸交互和鼠标交互?
理想情况下,答案是肯定的.如果没有,我有一些选择:
1)我们使用WURFL获取设备信息,因此可以创建我们自己的设备矩阵.根据设备的不同,我们将使用touchstart或点击.
2)通过JS检测浏览器中的触摸支持(我需要对此进行更多的研究,但似乎这是可行的).
但是,这仍然存在一个问题:支持BOTH的设备如何.我们支持的一些手机(即Nokias和黑莓手机)同时具有触摸屏和键盘.所以这种方式让我完全回到原来的问题......是否有办法允许两者同时以某种方式?
所以我的困境是我不想两次编写相同的代码.一次为click事件,另一次为touchstart事件.
这是原始代码:
document.getElementById('first').addEventListener('touchstart', function(event) {
do_something();
});
document.getElementById('first').addEventListener('click', function(event) {
do_something();
});
Run Code Online (Sandbox Code Playgroud)
我该怎么压缩这个?有一个更简单的方法!
我正在使用jquery animate来制作幻灯片.我在幻灯片的末尾有一个箭头,并在该箭头上给出了点击事件.它的工作原理是在点击时在silde中移动一个项目并在mousedown上移动整个silde.这在桌面上运行良好,但在iPad中,一次点击就会有两个项目进入幻灯片.我不明白为什么在iPad中调用click事件两次.点击的示例代码是:
$('#next_item').bind('mousedown touchstart MozTouchDown',function(e) {
$('.slide').animate({left:left},6000);
});
$('#next_item').bind('mouseup touchend MozTouchRelease',function(e) {
No.nextItem();
});
Run Code Online (Sandbox Code Playgroud)
#next_item是幻灯片末尾箭头的id.我已尝试过unbind touchstart和touchend事件但是在滑动滚动期间由于解除绑定物品在单个项目后没有进入幻灯片内部.No.nextItem()在幻灯片中移动一个项目.leftin $('.slide')是向左移动幻灯片.请帮助我找到解决方案为什么会发生这种情况以及如何为ipad解决此问题.
因此,我们正在为一个在Safari中的iOS7上完美运行的客户端构建这个Web应用程序.但是当我们在iOS8中检查应用程序时,它有一些巨大的错误.
<section style="overlay-y: scroll;"></section>消失的内容(重叠部分).<a href="">Lala</a>)当我们-webkit-overflow-scrolling: touch;从容器中移除(包含所有内容的div)时,一切都像以前一样完美无瑕......
关于它可能是什么的任何想法?
click ×2
html ×2
jquery ×2
css ×1
dom-events ×1
ios ×1
ipad ×1
javascript ×1
touch ×1
touchstart ×1