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

前端之家收集整理的这篇文章主要介绍了html5 – 可以*你*在移动浏览器上获得SVG接受鼠标/触摸事件?我不能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
显示一个带有嵌入式SVG的 HTML.我想要它来检测鼠标事件,但它不能在移动设备上工作( Android Jellybean).它适用于桌面浏览器.

这是一个演示页面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手机失败.

提前致谢,
杰罗姆.

解决方法

经过对简单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],"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不关心是否在元素中设置了(填充:无).选择你的毒药

原文链接:https://www.f2er.com/html5/168152.html

猜你在找的HTML5相关文章