Prevent 'rapid' clicking of a UI element from selecting text?

Question

I'm developing a Javascript slider that implements back/forward arrows for navigation. My problem is that rapidly clicking the 'Forward' arrow selects text. (Though for some reason this doesn't happen when rapidly clicking any of my other buttons.) I basically have the same problem as the OP in [this][1] question, but none of the answers work for me. I don't have the option of using <button>'s, I even tried it and it didn't work.

@Tim, no. Check the accepted answer in the other question I link to. — HellaMad, Jan 20 '12 at 15:52
@DC yeah I can click links but I'm using Firefox and I can't see left right buttons or any slider elements on your page there are only images — mas-designs, Jan 20 '12 at 15:54
Have you seen this question on SO: http://stackoverflow.com/questions/69430/is-there-a-way-to-make-text-unselectable-on-an-html-page — T. Stone, Jan 20 '12 at 15:54
@EvilP Hmm, I haven't tested in FF yet and don't have access to it right now. Can you try Chrome? — HellaMad, Jan 20 '12 at 15:55

score 2 · Answer 1 · answered Jul 10 '13 at 09:52

2

I believe that adding this to your css should do the work:

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

answered Jul 10 '13 at 09:52

Bart Az.

1,644
1
22
32

This works great and has the added bonus that I can apply this fix on sites that aren't mine (looking at you GoG) by using a plugin to add CSS to the page. Thanks a lot! – Vala Jun 21 '14 at 11:20

score 2 · Answer 2 · edited May 23 '17 at 12:05

2

I think you just want to disable the selection of text which can be done like the accepted answer in this question How to disable text selection using jQuery?

or if you're using jQueryUI you can just do

$('#mydiv').disableSelection();

edited May 23 '17 at 12:05

Community

1
1

answered Jan 20 '12 at 16:07

dstarh

4,976
5
36
68

score 1 · Accepted Answer · answered Jan 20 '12 at 15:59

1

Instead of making the arrow images the background for the <a> items, try actually placing the <img>s inside of the <a> tags. I believe the problem is that the browser thinks you're clicking on the background - which you effectively are - and many clicks on the background highlights text.

You said you don't have the option of using <button> -- What other limitations are we working with?

answered Jan 20 '12 at 15:59

Tim

14,447
6
40
63

Won't that just cause the image to become selected on rapid clicking rather than text in the background? – HellaMad Jan 20 '12 at 16:05
You could then put the image inside of ` – Tim Jan 20 '12 at 17:15

score 1 · Answer 4 · answered Jan 20 '12 at 16:01

You can disable your link for a little time:

//Change image
//Disable the link (the arrow)
setTimeout(function()
    {
    //Enable your link
    }, 300); //300 is a time in ms

A plugin of JQuery allows you to disable/enable pretty much any field in the page: http://plugins.jquery.com/project/jqueryenabledisable

Prevent 'rapid' clicking of a UI element from selecting text?

4 Answers4