svgPanZoom: отключить прослушиватель кликов при панорамировании

Question

Это вопрос, связанный с библиотекой для ariutta/svg-pan-zoom.

У меня есть элемент SVG с тегами <a>. Через jQuery я обрабатываю клики по этим элементам: $('svg').on('click', 'a', function() { ... }).

Теперь я добавил библиотеку, упомянутую выше, для масштабирования и панорамирования элемента SVG. Это отлично работает, за исключением случаев, когда курсор находится на элементе a, он запускает прослушиватель кликов.

Как я могу предотвратить прослушивание слушателя, когда мышь появилась из кастрюли?

Answer 1

Что вы можете попробовать это добавить свои пользовательские обработчики событий для svgPanZoom как в custom events handler example

Вы должны подключить mousedown, mousemove и mouseup события. порядок вещей должен быть такой:

• крюка в щелчки перед библиотекой начинается
• на mousedown установлен флаг, нажмите может произойти (например, willClick = true)
• на mousemove отключить JQuery слушателя и установить флаг ложь
• на mouseup проверки, если флаг является ложным и включить Jquery слушателю

Этот путь там Wi будет 2 сценария:

• Если пользователь только щелкает:
  • mousedown обжигает
  • mouseup обжигают
  • click обжигают
• Если пользователь сковорода:
  • mousedown увольняется
  • mousemove обжигают и слушатель отключен (возможно, несколько раз)
  • mouseup обжигают и слушатель снова включается

Теперь я не уверен, если предотвращение клик будет действительно работать, поскольку это зависит о порядке событий и о том, как jQuery хранит историю событий внутри (если это так).

Другим способом было бы установить глобальный флаг wasPanned на событие mousemove и внутри вашего обратного вызова jquery для проверки этого флага и его сброса.

Answer 2

может быть слишком поздно для вас, тем не менее, я хотел бы поделиться своим решением:

я использую beforePan установить свойство, что щелчок в настоящее время отключена.

В обработчике событий 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, который я использую, чтобы сохранить свойство. Но, конечно, любое другое место можно было бы использовать для хранения, если щелчок в данный момент отключен.