javascript - svgPanZoom：平移时禁用点击监听器

Question

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

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

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

当 mouseup 由 pan 引起时，如何防止监听器触发？

Answer 1

对你来说可能为时已晚，不过，我想分享我的解决方案：

我使用 beforePan 设置一个属性，该点击当前被禁用。

在单击事件处理程序中，我检查属性，如果单击当前被禁用。如果是这样，请不要执行任何操作，而是将属性设置回来。下一次，点击事件处理程序被调用，当你真正点击时，点击动作正常执行。

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


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

在上面的代码中，svgPolygons 是我用来存储属性的 SVG 中的一个元素。但是，当然，如果当前禁用单击，则可以使用任何其他位置进行存储。

Answer 2

您可以尝试将自定义事件处理程序添加到 svgPanZoom，就像在自定义事件处理程序示例中一样

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

• 在库开始之前挂钩点击
• mousedown设置一个可能发生点击的标志（例如willClick = true）
• 在mousemove禁用 jquery 侦听器并将您的标志设置为 false
• 检查mouseup标志是否为假并启用jquery侦听器

这样会有2个场景：

• 如果用户只点击：
  • mousedown被解雇
  • mouseup被解雇
  • click被解雇
• 如果用户平移：
  • mousedown被解雇
  • mousemove被触发并且监听器被禁用（可能多次）
  • mouseup被触发并重新启用侦听器

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

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