可以*你*在移动浏览器上获得SVG接受鼠标/触摸事件吗？我不能

Question

我显示一个带有嵌入式SVG的HTML.我想要它来检测鼠标事件,但它不适用于移动设备(Android Jellybean).它适用于桌面浏览器.

这是一个演示页面:http: //artsyenta.org/misc/ss/j.touchtry1.html.

如果将鼠标拖到圆圈上,则会在名为"j_xxx"的元素中看到鼠标条目的日志.这适用于Firefox和Chrome.

打开你的Android平板电脑(我也在某人的iPhone上试过这个,结果相同).将手指拖过圆圈即可立即获得一个touchenter事件.没有其他表现.

您可以通过查看页面源来查看整个页面和代码.它不长,最长的部分是SVG定义.重要的部分是:

$(document).ready(function() {
  makeSomethingHappen("hello");
});
function makeSomethingHappen(svg) {
  placeATop(true);
  $('[class^=j_]')
    .on("mouseover", function(event) { logAction(event, this); })
    .on("mouseout", function(event) { logAction(event, this); })
    .on("touchstart", function(event) { logAction(event, this); })
    .on("touchend", function(event) { logAction(event, this); })
    .on("touchenter", function(event) { logAction(event, this); })
    .on("touchleave", function(event) { logAction(event, this); })
    .on("touchEnter", function(event) { logAction(event, this); })
    .on("touchLeave", function(event) { logAction(event, 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,2.63,224.739,6.55z"/> 
    [snip]
  </g>
</svg>

我再次检测桌面浏览器上的鼠标事件,但没有移动浏览器的触摸或鼠标事件.是否缺少技术,或手机缺少什么？iPhone浏览器,Jellybean上的Google Chrome和Firefox mobile都失败了.

谢谢你,杰罗姆.

Answer 1

在对普通的SVG事件和RaphaelJS事件进行了大量研究之后,我为每个事件提供了可行的解决方案.这是RaphaelJS解决方案:

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], this, "t");
        }, false);
};

代码不是密不透风的,但说明了主要观点.

首先,必须通过addEventHandler()调用注册事件.使用RaphaelJS onmousemove()等,处理程序无法在平板电脑上运行.

其次,对于触摸事件,您需要深入了解触摸列表.我的应用程序只关心单个手指,因此列表的[0]事件就足够了.有许多列表 - touches,targetTouches,changedTouches - 所以选择一个合适的列表.

第三,确定窗口是否需要冒泡事件.如果我调用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不关心是否在元素中设置(fill:none).选择你的毒药.