I’ve added a mouseup event listener to a span that will increment the value in a sibling text input via js… think of arrow controls that allow a user to click increase or decrease a value. The problem: if a user clicks the span too fast, Safari/Chrome interpret it as a double-click and starts to select nearby items and render them under a blue box. There must be a default behavior in these browsers that auto selects nearby text as a convenience function when you double-click.
I’ve tried adding a dblclick event to catch the event and run preventDefault(), stopPropagation() or return false. However, nothing works. I’ve also added -user-select: none; CSS rules to the nearby items. However, the browser just skips over these and finds something else to highlight. Any thoughts on how to prevent this behavior?
After finding the link in the comment above, I was able to arrive at a solution. The idea… attach a click event to the button and inspect its “detail” property for the total number of clicks. If the user clicks more than twice, call clearSelection which clears the “selection” DOM element. I can also add a class to a specific block of text that sets the selected background style to transparent to prevent flashing.
I posted a JSFiddle here.
http://jsfiddle.net/vince/Ts85n/