double-clicking one element (button, background) is selecting other nearby unrelated images (in Chrome)

Question

Anyone ever experience something like this? I have a bunch of SVG icons attached to various jQuery click() events, whenever any of them are double-clicked, nearby unrelated images are being selected.

In another related case, I have a large image, and when I double click on the empty body background (like the far lower nonparallel corner for example), IT gets selected.

This is not happening in Firefox (or IE), - just Chrome AFAIK (haven't tested anywhere else).

Perhaps I can somehow make things un-drag-over-able? (< wow, eloquent huh?).

Couldn't really reproduce it in jsFiddle at the moment. This has been going on for quite some time, doesn't really matter where or in what container these images are in, the button (or faux-button I should say) clicks find them (seemingly at random, sometimes one, sometimes two, sometimes it deselects one or both on successive clicks).

Somewhere in my head it kind of makes sense, like when you double click near text but not on it, a whole word or more is selected.

Thanks ahead of time.

edit: this does the trick, but limits text copying. Not exactly ideal but for my current case is fine. http://css-tricks.com/almanac/properties/u/user-select/

Answer 1

Try to add to a clickable element this rules:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;