这是一个演示页面：http://artsyenta.org/misc/ss/j.touchtry1.html.
如果将鼠标拖动到圆圈上,则会将鼠标条目的日志记录到名为“j_xxx”的元素中.这适用于Firefox和Chrome.
打开你的Android平板电脑(我也试过这个在某人的iPhone上,效果相同).将你的手指拖到圈子上,然后你就会触发一个触动器事件.没有其他的显示.
您可以通过查看页面源来查看整个页面和代码.不久之后,最长的部分是SVG定义.重要的部分是：
$(document).ready(function() {
makeSomethingHappen("hello");
});
function makeSomethingHappen(svg) {
placeATop(true);
$('[class^=j_]')
.on("mouSEOver",function(event) { logAction(event,this); })
.on("mouSEOut",this); })
.on("touchstart",this); })
.on("touchend",this); })
.on("touchenter",this); })
.on("touchleave",this); })
.on("touchEnter",this); })
.on("touchLeave",this); });
}
var cntAct = 0;
function logAction(ev,ele) {
cntAct++;
var logSpan = $('#logTrace');
logSpan.html("" + cntAct + ": " + ev.type + " '" + $(ele).attr("class")
+ "'<br/>" + logSpan.html());
}
这是SVG的一部分：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
id="jsvg" x="0px" y="0px" width="376.247px" height="364.318px" viewBox="140 110 130 120"
enable-background="new 0 0 376.247 364.318" xml:space="preserve">
<g id="Layer_1">
<path class="j_aa_" opacity="0.75" fill="#FFFFFF" stroke="#0071BC" stroke-width="0.9925" enable-background="new " d="M224.739,6.55l-6.414,23.957c-10.377-2.785-21.304-2.785-31.671,0L180.232,6.55C194.813,2.63,210.155,224.739,6.55z"/>
[snip]
</g>
</svg>
再次,我在桌面浏览器上检测到鼠标事件,但没有移动浏览器的触摸或鼠标事件.有缺少的技术,还是有些东西丢失了手机？它与iPhone浏览器,谷歌Chrome在Jellybean和Firefox手机失败.
提前致谢,
杰罗姆.
解决方法
window.onload = function(e) {
document.getElementById("rsr").addEventListener("mousemove",function(event) {
logAction(event,this,"m");
},false);
document.getElementById("rsr").addEventListener("touchmove",function(event) {
if(event.preventDefault) event.preventDefault();
// perhaps event.targettouches[0]?
logAction(event.changedtouches[0],"t");
},false);
};
代码不是气密的,而是说明了要点.
首先,事件必须通过addEventHandler()调用进行注册.使用RaphaelJS onmousemove()等,处理程序在平板电脑上不起作用.
第二,对于触摸事件,您需要挖掘触摸的列表.我的应用程序只关心一个手指,所以列表的[0]事件就足够了.有一些列表 – 触摸,目标菜单,改变的菜单 – 所以选择一个适当的.
第三,确定窗口是否需要泡沫的事件.如果我调用preventDefault(),我会感觉到更敏感.
我在Google Nexus,iPad 3和iPad Mini上进行了测试.好的结果.
我也有一个简单SVG的解决方案.它是基于这个网站：
http://my.opera.com/MacDev_ed/blog/2010/02/01/how-to-get-all-svg-elements-intersected-by-a-given-rectangle
我使用的和他使用的Javascript的区别在于,触摸的触摸列表需要访问. “root”是此示例的svg元素ID. “logTrace”是接收注释的跨度.
var root = document.getElementById("root");
var evtt = evt.touches[0];
var rpos = root.createSVGRect();
rpos.x = evtt.clientX;
rpos.y = evtt.clientY;
rpos.width = rpos.height = 1;
var list = root.getIntersectionList(rpos,null);
var maxItemId = list.length <= 0 ? "(no match)" : list[list.length - 1].id;
document.getElementById("logTrace").innerHTML = "screen: (" + evtt.clientX + "," + evtt.clientY + ") ? uu(" + maxItemId + "): (" + uupos.x.toFixed(0) + "," + uupos.y.toFixed(0) + ")";
我已经在Nexus和iPad上成功测试了这个解决方案.然而,它在iPad Mini上表现不佳 – 为什么在两个iPad设备上表现不同？
我也注意到,“简单的svg”解决方案似乎没有像RaphaelJS版本那样准确地发现.在SVG元素的边缘附近,普通svg检测的检测效果不是很好.对于RaphaelJS使用,我一直都取得了不错的成绩.
OTOH,RaphaelJS使用对SVG敏感(填写：无).简单SVG不关心是否在元素中设置了(填充：无).选择你的毒药