Strange div selection when showing/hiding a content with jQuery

Question

There is a small button that reveals some extra content when clicked. When I click fast or more than once the content that shows up is marked like it is selected:

enter image description here

This selection disappears when the animation of jquery show effect is finished. The black arrow points to the button.

Any idea why there is this selection and how to avoid it?

what if you bind a `dblclick` handler in which you do a `event.preventDefault` ? — Fabrizio Calderan, Sep 19 '12 at 10:43

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

When you're clicking fast you're probably moving your mouse a bit, which makes you select items. Try using

document.selection.empty();

and (doesn't work in all browsers)

window.getSelection().removeAllRanges();

to clear the selection.

Source: Clear a selection in Firefox

edited May 23 '17 at 12:19

Community

1
1

answered Sep 19 '12 at 10:43

Ratzor

307
3
15

wow that helps, but there is still a bit of selection, very strange, however good enough – DarkLeafyGreen Sep 19 '12 at 11:05

score 0 · Answer 2 · answered Sep 19 '12 at 10:45

0

You could also set the highlight-color to be the same as the background of the container, then if it does get selected you won't actually notice..?

answered Sep 19 '12 at 10:45

danwellman

9,068
8
60
88

score 0 · Answer 3 · answered Dec 28 '12 at 18:57

You could also use CSS to make buttons not be selectable, which would disable the browsers' text selection. I'm not sure exactly what your button css style looks like but something like this should work:

button {
    ...
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Strange div selection when showing/hiding a content with jQuery

3 Answers3