Preventing on('pointertap') if scrolling

[Agint]

When natively scrolling the div which the pixi resides in on a touch device, on('pointertap') on an interactive Sprite will fire even if the starting "tap-down" location is far away from the ending "tap-up".

The desired effect is that nothing happen with the button event (the user is intending to scroll, not tap on the button).

How do I prevent the tap to happen, is there a way to detect distance (and/or time) between the press down location and press up without rewriting the entire pointertap event from scratch?

[Agint]

Couldn't find any built-in way to do this, so I used a manual approach:

const threshold = 40;
const ctx = this;

const onButtonTapUp = function(_e) {
	// We don't want mouse events from right-click, middle-click, and back/forward buttons on mouse
	if (_e.data.pointerType === 'mouse' && _e.data.button !== 0) return;
	// ...we just want touch-taps and left mouse clicks

	const oldX = _e.target.startTapX;
	const oldY = _e.target.startTapY;
	const newX = _e.data.global.x;
	const newY = _e.data.global.y-ctx.myDiv.scrollTop;

	if (newX-threshold <= oldX && newX+threshold >= oldX && newY-threshold <= oldY && newY+threshold >= oldY) {
		// Do action
	}
};

const onButtonTapDown = function(_e) {
	if (_e.data.pointerType === 'mouse' && _e.data.button !== 0) return;
	_e.target.startTapX = _e.data.global.x;
	_e.target.startTapY = _e.data.global.y-ctx.myDiv.scrollTop;
};

interactiveSprite.on('pointertap', onButtonTapUp);
interactiveSprite.on('pointerdown', onButtonTapDown);

 

[ivan.popelyshev]

yes, that's how i usually do it when I drag objects, i dont start drag if its too close to start position