svgPanZoom:在平移时禁用单击侦听器

Question

这是一个针对ariutta/svg-pan-zoom的库特定问题。

我有一个带有一些<a>标签的SVG元素。通过jQuery，我处理这些元素上的点击：$('svg').on('click', 'a', function() { ... })。

现在，我添加了上面提到的用于缩放和平移SVG元素的库。这很好用，除了每次我平移光标在a元素上时，它都会触发单击侦听器。

当鼠标向上移动时，我如何防止监听程序触发？

Answer 1

对你来说可能太晚了，然而，我想分享我的解决方案：

我使用beforePan来设置一个属性，该单击当前是禁用的。

在click eventhandler中，如果当前禁用了click，我会检查该属性。如果是这样，请不要执行任何操作，而是将属性设置回原处。下一次，click eventhandler被调用，当您实际单击时，单击操作将正常执行。

    beforePan: function(oldPan, newPan) {
        svgPolygons.clickDisabled = true;
    },


    function clickerHandler() {
        if (!svgPolygons.clickDisabled) {
             // perform click action
        } else {
            // enable click again
            svgPolygons.clickDisabled = false;
        }
    }

在上面的代码中，svgPolygons是SVG中的一个元素，我用它来存储属性。当然，如果click当前被禁用，任何其他地方都可以用来存储。

Answer 2

您可以尝试像在custom events handler example中那样向svgPanZoom添加自定义事件处理程序

你应该挂接mousedown、mousemove和mouseup事件。事情的顺序应该是这样的：

这样就会有两种情况：

如果用户仅单击：

• mousedown is fired
• mouseup is fired
• click is fired

，则执行

​

如果用户pans：

• mousedown为fired
• mousemove，则触发侦听器并禁用侦听器(可能触发多个times)
• mouseup且侦听器为reenabled

)，则执行

​

现在我不确定防止点击是否真的有效，因为它取决于事件的顺序和jQuery内部存储事件历史记录的方式(如果它做到了这一点)。

另一种方法是在mousemove事件和jquery回调中设置一个全局标志wasPanned，以检查并重置该标志。