Stop event propagation when panning

[DonaldDuck313]

I'm making a game where the graphics are SVG based, so I use this library to pan across the game. Some of the elements inside the SVG have onclick listeners so that game actions are performed when I click on them.

The problem is that when I pan, it pans as it should, but then when it's finished panning and the mouse happens to be on top of an element with a click listener, that click listener runs as well.

Is there a way to stop event propagation so that when I drag to pan it only pans and ignores any click listeners? If not, could this be added?

[GreyWyvern]

I had the same issue, however I solved it outside the scope of this library.

Listen for the mousedown event on your SVG, record the position of the mouse cursor, and set a "dragging" flag to false.

Listen for the mousemove event on your SVG, compare the current mouse cursor position to the original mouse cursor position and if it's over X, set the "dragging" flag to true.

In your click handler, if the "dragging" flag is set, abort the handler.

I don't think this needs a fix in the library itself.

[hellodaylight]

@DonaldDuck313
I solved this using the following code (thanks for the direction @GreyWyvern!):

// init vars
var dragging = false;
var dragX = 0;
var dragY = 0;
var clickX = 0;
var clickY = 0;

// set the pan zoom on your svg element
let target = document.getElementById('mySVG');
var panZoom = svgPanZoom(target, {
	minZoom: 1,
	maxZoom: 2,
	zoomScaleSensitivity: 0.5,
	controlIconsEnabled: false,
	mouseWheelZoomEnabled: false,
	preventMouseEventsDefault: false,
	dblClickZoomEnabled: false
});

// get elements you want to apply click handler to (elements within svg with class name)
var elements = document.getElementsByClassName("element");

// set click function
var click = function(e) {
	if (dragging == false) {
		// do what you want when clicked (but not dragged)	
		var attribute = this.getAttribute("data-attribute");
		window.location.href = data-attribute;
	}
};

// add click handler to elements
for (var i = 0; i < elements.length; i++) {
	elements[i].addEventListener('click', click, false);
}

// set x and y when mouse down
target.addEventListener('mousedown', function(e) {
	clickX = event.clientX;
	clickY = event.clientY;
	dragging = false;
});

// set x and y when mouse move (dragging)
target.addEventListener('mousemove', function(e) {
	dragX = event.clientX;
	dragY = event.clientY;
	if ((dragX != clickX) && (dragY != clickY)) {
		dragging = true;
	} else {
		dragging = false;
	}
});

[DonaldDuck313]

@hellodaylight Thanks, that seems to work. But shouldn't it be if ((dragX != clickX) || (dragY != clickY)) { (with || instead of &&)?