Javascript svgPanZoom：禁用平移时单击侦听器

这是一个图书馆特有的问题

我有一个SVG元素，带有一些

标记。通过jQuery，我处理对这些元素的点击：

$（'svg'）。在（'click'，'a'，function（）{…}）

现在，我添加了上面提到的用于缩放和平移SVG元素的库。这非常有效，除了每次当光标位于

a

元素上时，它都会触发click侦听器

---

当鼠标由平移产生时，如何防止侦听器触发？

您可以尝试将自定义事件处理程序添加到svgPanZoom中，如中所示

您应该钩住

mousedown

、

mousemove

和

mouseup

事件。 事情的顺序应该是这样的：

• 在库启动之前钩住单击
• 在

  mousedown

  上设置可能发生单击的标志（例如

  willClick=true

  ）
• 在

  mousemove

  上禁用jquerylistener并将您的标志设置为false
• 在

  mouseup上

  检查标志是否为false并启用jquery侦听器

这样将有两种情况：

• 如果用户仅单击：

  • mousedown

    被触发

  • mouseup

    被触发

  • 单击

    被激发
• 如果用户pans：

  • mousedown

    被触发

  • mousemove

    被激发，侦听器被禁用（可能多次）

  • mouseup

    被激发，监听器重新启用

现在我不确定防止点击是否真的有效，因为它取决于事件的顺序以及jQuery如何在内部存储事件历史记录（如果这样做的话）

---

另一种方法是在

mousemove

事件和jquery回调内部设置一个全局标志

wasPanned

，以检查并重置该标志。

对您来说可能太晚了，不过，我想分享我的解决方案：

我使用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中的一个元素，我使用它来存储属性。当然，如果单击当前被禁用，任何其他地方都可以用来存储