我正在开发一个必须在各种设备上运行的移动网站.黑莓手机让我头疼的是黑莓.
我们需要支持键盘点击和触摸事件.
理想情况下,我只是使用:
$thing.click(function(){...})
但我们遇到的问题是,这些黑莓设备中的一些从触摸到触发点击时会有非常烦人的延迟.
解决方法是改为使用touchstart:
$thing.bind('touchstart', function(event){...})
但是,如何绑定这两个事件,但只触发一个？我仍然需要键盘设备的click事件,但当然,如果我使用触摸设备,则不希望点击事件触发.
一个额外的问题:是否有这样做,另外还适用于甚至没有touchstart事件的浏览器？在研究这个问题时,看起来BlackBerry OS5不支持touchstart,因此还需要依赖该浏览器的点击事件.
附录:
也许更全面的问题是:
使用jQuery,是否可以/建议使用相同的绑定处理触摸交互和鼠标交互？
理想情况下,答案是肯定的.如果没有,我有一些选择:
1)我们使用WURFL获取设备信息,因此可以创建我们自己的设备矩阵.根据设备的不同,我们将使用touchstart或点击.
2)通过JS检测浏览器中的触摸支持(我需要对此进行更多的研究,但似乎这是可行的).
但是,这仍然存在一个问题:支持BOTH的设备如何.我们支持的一些手机(即Nokias和黑莓手机)同时具有触摸屏和键盘.所以这种方式让我完全回到原来的问题......是否有办法允许两者同时以某种方式？
我有一个非常具体的问题.我正在为手机写一个网页,上面有一个按钮.我正在检测touchevent包括IE在内的每个浏览器,但在IE上它是非常具体的.几秒钟后它会自动结束.你能以某种方式帮助我吗？这是我的代码(修改过的代码,但仍然无法正常工作):
if (window.navigator.pointerEnabled) {
tapButton.addEventListener("pointerup", function(e) {
e.preventDefault();
addClass(this, 'clicked');
buttonTouched = true;
}, false);
tapButton.addEventListener("pointerdown", function(e) {
e.preventDefault();
removeClass(this, 'clicked');
buttonTouched = false;
}, false);
alert("pointerEnabled");
}
else if (window.navigator.msPointerEnabled) {
tapButton.addEventListener("MSPointerDown", function(e) {
e.preventDefault();
addClass(this, 'clicked');
buttonTouched = true;
}, false);
tapButton.addEventListener("MSPointerUp", function(e) {
e.preventDefault();
removeClass(this, 'clicked');
buttonTouched = false;
}, false);
alert("mspointerEnabled");
}
else {
alert("ordinary touch");
tapButton.addEventListener('touchstart', function(e) {
e.preventDefault();
addClass(this, 'clicked');
buttonTouched = true;
}, false);
tapButton.addEventListener('touchend', function(e) {
e.preventDefault();
removeClass(this, 'clicked');
buttonTouched …我有上触发功能的元件ng-mousedown和ng-mouseup.但是,它在触摸屏上不起作用,是否有任何指令ng-touchstart和ng-touchend？
我有一个名为“元素”的对象。如果有人触摸平板电脑，我想返回触摸位置相对于对象的 x 和 y 坐标，即对象的左上角具有坐标 x=0 和 y=0。
我知道如何在台式机上实现这一点：
$(function() {
$(document).mousedown(function(e) {
var offset = $("#element").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert(relativeX+':'+relativeY);
$(".position").val("afaf");
});
});
所以我猜应该用“touchstart”代替“mousedown”这个词。但是，它仍然不起作用。
如何更改上面的代码，使其适用于带有“touchstart”而不是“mousedown”的平板电脑？
我正在尝试使用JavaScript和jQuery来捕获触摸事件.但是我在Android 2.3.2上的Web浏览器中看到了一些非常奇怪的行为:每当我点击屏幕,然后快速点击屏幕上的其他位置时,浏览器:
橙色边框似乎只是同一个潜在问题的一个相关症状,所以我并不太担心它 - 它实际上很方便能够告诉浏览器何时搞砸了.我真正想知道的是,我如何能够持续获得两次快速点击的正确触摸事件？我相信,当问题得到解决时,橙色边框也会消失.
以下是我到目前为止所制定的所有痛苦细节.
这是一个显示问题的页面,并显示有关收到的每个事件的详细信息和时间的大量诊断信息.如果你点击蓝色矩形,你肯定会得到橙色闪光/坏事件,然后快速点击黑色矩形.
我的jQuery代码非常标准.该log功能的实施并不重要; 问题是浏览器在应该的时候没有调用它.
el = $('#battle');
el.on('touchstart', function(event) {
log(event);
return event.preventDefault();
});
el.on('touchend', function(event) {
return log(event);
});
el.on('touchcancel', function(event) {
return log(event);
});
el.mousedown(function(event) {
log(event);
return event.preventDefault();
});
return el.mouseup(function(event) {
return log(event);
});
关于我最初描述的现象的更多细节:
橙色边框和突出显示:这是相同的橙色边框,并突出显示浏览器在单击时绘制超链接.但是页面上没有超链接,浏览器在整个屏幕周围绘制橙色边框 - 或者更具体地说,是围绕外部<div id="battle">我通过jQuery挂钩事件.
错误事件:在我的touchstart事件处理程序,我打电话event.preventDefault(),告诉浏览器不滚动,而不是合成鼠标事件,等等.因此,我希望只得到touchstart和touchend事件.我做了,第一次点击.但不是touchstart/ touchend对于第二次敲击,我得到的所有数量的触摸事件的组合,合成的鼠标事件,以及偶尔touchcancel的第二次敲击,或第一次轻触甚至重复的事件.详情如下.
此行为也仅在非常特殊的情况下发生:
touchstart). …目的
单击时关闭锚标记的父div.在下面的代码中,我想在用户单击锚标记close_performance_tt时隐藏div performance_tt.
问题
花了几个小时后,无法让它在iOS设备上运行.在其他一切工作正常,甚至是BlackBerry 10设备.
<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;">
<div>Website performance has become an important consideration for most sites.
The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention.
As a result, creating a system that is optimized for fast responses and low latency is key.</div>
<a id="close_performance_tt" href="#">Close</a>
<script>
var userAgent = navigator.userAgent.toLowerCase();
var isiOS …我正在为iPad开发一个javascript/html5项目.
我需要能够捕获一个元素上的touchmove事件,该元素DOM在touchstart事件被触发后直到事件发生之后才被添加到该元素(即直到一个人将手指放在屏幕上之后).
我试过模拟一个touchstart事件并以编程方式触发它...
$( "#container" ).append( element );
element.on( "touchmove", doStuff );
var ev = $.Event( "touchstart" );
element.trigger( ev );
......但这不起作用.我可以doStuff开始射击的唯一方法是抬起手指,然后再次触摸屏幕,触发第二个touchstart事件.
如何在屏幕上已经touchmove添加到DOM手指之后的元素上捕获事件？
如果您使用以下语法,一个简单的touchstart事件将起作用:http: //jsfiddle.net/rwdu4hb9/
$(function(){
$('.test').on('touchstart', function(){
alert("Clicked");
});
});
但是如果你想为所有即将到来的元素添加你的活动,请$(document).on(..)点击这里:http:
//jsfiddle.net/rwdu4hb9/1/
$(function(){
$(document).on('touchstart', '.test', function(){
alert("Clicked");
});
});
该事件不会被触发.这次电话有什么问题？
使用iOS 8.0.2在iPad上测试
我在 iPhone 6 设备上滚动时遇到了这个问题（在 Safari 和 Chrome 上测试）：
给定一个可滚动的 div，如果我在 div 已经处于惯性滚动运动时触摸它，滚动运动会按预期停止，但touchstart事件根本不会触发。
当小米Android装置（在Chrome测试）测试的滚动停止与该touchstart事件被触发。
为什么touchstart没有触发？。这是 iPhone 上的标准行为吗？
我已经设置了一个小提琴来测试这种行为：
https://fiddle.jshell.net/galoxia/L63wj9or/
只需做出手势以“激活”蓝色框上的惯性滚动，然后再次触摸以停止它。在 Android 上，您将touchstart在黄色框中看到。在 iPhone 上你不会。
在我的Android应用程序中,用户可以使用ViewPager浏览一些HTML页面,用户可以触摸要突出显示的元素.
问题是当尝试使用以下代码使用javascript获取触摸事件时,elementFromPoint在导航到新页面时返回null,但在用户缩放页面或滚动页面后,它可以正常工作.
我发现touchstart事件的注册发生在缩放或滚动页面之后.所以它在那之后工作,虽然它在$(document).ready()上注册
$(document).ready(function(){
document.addEventListener("touchstart", touchstart, false);
});
function touchstart(e) {
var x = e.targetTouches[0].clientX;
var y = e.targetTouches[0].clientY;
el = document.elementFromPoint(x, y);
}
谢谢