jquery - Hammer.js: clicking on SVG element to start javascript not working in iPhone Safari -
i'm trying make element in svg clickable in order call javascript function (in case alert function, can generic function). svg embedded in html page through object tag.
svg
<?xml version="1.0" encoding="utf-8"?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve"> <g id="livello_4"> <a xlink:href="javascript:alert('working!');" onclick="javascript:alert('working!');" target="_top"> <use xlink:href="javascript:alert('working!');"></use> <rect class="hover_group" id="piazza" x="481.5" y="265.7" fill="#000000" stroke="transparent" stroke-miterlimit="10" width="127.8" height="88.7"/> </a> </g> <style> .hover_group:hover{ fill: rgba(255,0,0,0.75); } </style> </svg> html
<!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>title</title> <link rel="stylesheet" type="text/css" href="styles/main.css" /> <script src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="js/svg-pan-zoom.js"></script> <script type="text/javascript" src="js/hammer.js"></script> <script> window.onload = function() { var eventshandler; eventshandler = { halteventlisteners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel'] , init: function(options) { var instance = options.instance , initialscale = 1 , pannedx = 0 , pannedy = 0 // init hammer // listen pointer , touch events this.hammer = hammer(options.svgelement, { inputclass: hammer.support_pointer_events ? hammer.pointereventinput : hammer.touchinput }) // enable pinch this.hammer.get('pinch').set({enable: true}) // handle double tap this.hammer.on('doubletap', function(ev){ instance.zoomin() }) // handle pan this.hammer.on('pan panstart panend', function(ev){ // on pan start reset panned variables if (ev.type === 'panstart') { pannedx = 0 pannedy = 0 } // pan difference if (ev.type === 'pan' || ev.type === 'panend') { console.log('p') instance.panby({x: ev.deltax - pannedx, y: ev.deltay - pannedy}) pannedx = ev.deltax pannedy = ev.deltay } }) // handle pinch this.hammer.on('pinch pinchstart pinchend', function(ev){ // on pinch start remember initial zoom if (ev.type === 'pinchstart') { initialscale = instance.getzoom() instance.zoom(initialscale * ev.scale) } // on pinch zoom if (ev.type === 'pinch' || ev.type === 'pinchend') { instance.zoom(initialscale * ev.scale) } }) // prevent moving page on devices when panning on svg options.svgelement.addeventlistener('touchmove', function(e){ e.preventdefault(); }); } , destroy: function(){ this.hammer.destroy() } } // expose window namespace testing purposes window.panzoom = svgpanzoom('#map', { zoomenabled: true , controliconsenabled: true , fit: 1 , center: 1 , customeventshandler: eventshandler }); }; </script> </head> <body> <div id="sect-map" class="section" style="height:500px;width:100%;"> <object style="height:100%;width:100%;" id="map" type="image/svg+xml" data="test.svg"> browser not support svg </object> </div> </body> from chrome , firefox (desktop , android) alert called, while doesn't happen on safari ios. missing?
edit: commented line
this.hammer.get('pinch').set({enable: true}) and alert started working on iphone. fact is, need pinch enabled, cannot remove line.
for reason safari ios ignores tapping when pinch enabled. had add block inside init function make detect tapping.
this.hammer.on('tap',function(ev){ $(ev.target).click(); })
Comments
Post a Comment