Question

这是ariutta/svg-pan-zoom的图书馆特定问题。

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

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

如何从平底锅中产生鼠标时阻止侦听器触发？

Answer 1

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

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

在click eventhandler中，如果当前禁用了click，我会检查属性。如果是，请不要执行任何操作，而是重新设置属性。下次调用click事件处理程序，当您实际单击时，单击操作将正常执行。

    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，如custom events handler example

您应该挂钩mousedown，mousemove和mouseup个事件。事情的顺序应该是这样的：

在图书馆启动前隐藏点击次数
在mousedown上设置了可能发生点击的标记（例如willClick = true）
on mousemove禁用jquery侦听器并将您的标志设置为false
on mouseup检查flag是否为false并启用jquery listener

这样会有两种情况：

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

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

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

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

2 个答案: