How to prevent selection on click?

[igorlanko]

I apologize if this was already discussed, but I couldn't find anything on this in recipes or other threads.

My selectable grid items are also links that can be clicked on and user would be brought to a details page of that grid item. However when clicking on the link, it also triggers the library to select this element. That creates an unwanted behavior. Let me demonstrate:

CleanShot.2023-11-23.at.15.54.43.mp4

Notice how on the last click, right before the user is redirected, you can see visual feedback that the grid item is selected? It makes sense from the library standpoint (this is how the demo seems to work too https://simonwep.github.io/selection/), but I was wondering if there's a way or a recipe to override that? I can't figure out the proper way.

I tried setting startThreshold, to 10 but it's somehow very inconsistent. For example it might ignore click for the first time, but every time after that it selects the item and then the link works and user is redirected.

Here's my 'beforestart' event handler at the moment:

.on('beforestart', ({ event }) => {
	// Prevent text selection while selecting
	document.body.style.userSelect = 'none'

	// Prevent selection if one of the following conditions is met:
	const allowedButtons = [
		2, // RMB
		4 // Scrollwheel
	]

	if (
		allowedButtons.includes(event?.buttons) ||
		event?.target.type === 'checkbox' ||
		event?.target.tagName === 'A' ||
		event?.target.classList.contains('artifact__overlay')
	) {
		return false
	}
})

[igorlanko]

Solved it with:

 features: {
        singleTap: {
            allow: false
        }
}