Hammer.js：单击 SVG 元素启动 javascript 在 iPhone Safari 中不起作用

Question

我正在尝试使 SVG 中的元素可点击以调用 Javascript 函数（在本例中为警报函数，但它可以是通用函数）。 SVG 通过 object 标签嵌入到 HTML 页面中。

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 only for pointer and 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 only the 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 the page on some devices when panning over SVG
            options.svgElement.addEventListener('touchmove', function(e){ e.preventDefault(); });
          }

        , destroy: function(){
            this.hammer.destroy()
          }
        }

        // Expose to window namespace for 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">
        Your browser does not support SVG
    </object>
</div>
</body>

从 Chrome 和 Firefox（桌面和 Android）正确调用警报，而在 iOS 的 Safari 上不会发生这种情况。我错过了什么？

编辑：我评论了行

this.hammer.get('pinch').set({enable: true})

并且警报开始在 iPhone 上工作。事实上，我需要启用捏合，所以我不能删除那条线。

Answer 1

出于某种原因，iOS 的 Safari 会在启用捏合时忽略点击。我不得不在 init 函数中添加这个块以使其检测点击。

this.hammer.on('tap',function(ev){
    $(ev.target).click();
})

Hammer.js：单击 SVG 元素启动 javascript 在 iPhone Safari 中不起作用

Hammer.js: clicking on SVG element to start javascript not working in iPhone Safari

javascript

iphone

jquery

svg

hammer.js

SVG

HTML