3

I'm capturing mouse events on a web page, specifically onclick. When I click in two different locations, my code is doing something at those two locations. But after the second click (with event.shiftKey=true), I also am finding that the contents of the page between those two locations are being selected as if I had done a click-drag-release between the start and end points.

I have looked at a couple of questions [1] and [2]regarding not allowing text to be selected, but both of those answers deal with CSS, which is inappropriate for this situation, both because the elements involved are arbitrary and of varying quantities, and because I don't want to disable showing a selection (I want to show a selection if there is one!), I want to disable from actually getting a selection at a specific time. So, clearing any selection that might have "accidentally" be made is out of the question too, as this would get rid of any previous valid selection.

I was thinking that the event is somehow propagating into the native code where it is making the selection, so I tried:

event.cancelBubble = true
event.preventDefault()
return false

But this did not work. I have only tested this with Chrome, but cross-browser is best.

Update: I have created a single Fiddle to demonstrate the problem. Click on any line of text in the output. Then shift+click on any other line. Both lines will have the CSS applied but there is also a light-blue browser selection in place, which I am trying to prevent.

Update 2: I'm voting to close because is @ivy_lynx pointed out, it is really a duplicate, and the answer at this linked question solves the problem.

Community
  • 1
  • 1
Michael
  • 9,060
  • 14
  • 61
  • 123
  • Probably there is something in your code that trigger that selection, but since you can't provide us an example or the code that you used, it's hard to help you. – Oscar Fanelli Sep 16 '14 at 22:55
  • 1
    @OscarFanelli I'll create a fiddle to illustrate the problem. – Michael Sep 16 '14 at 22:57
  • IF you use `JQuery` then when `event.shiftKey=true` you could add CSS to the different locations (elements) your clicking on the page to disable the selecting of text, and on shift key up you remove the CSS from said locations (elements). Of course the use of `JQuery` is not necessary however it does make things easier. – Jonny Henly Sep 16 '14 at 23:04
  • I found this: http://stackoverflow.com/questions/18645216/how-can-i-disable-text-selection-using-shift-without-disabling-all-text-selectio - the accepted answer might help, if I understand the problem according to the fiddle. You don't have to use jQuery ofcourse, there's always `element.style.MozUserSelect` and equivalents for the elements in question. – mechalynx Sep 16 '14 at 23:06
  • @ivy_lynx That appears to work. My understanding (apparently wrong) was that this particular style wouldn't propogate to children. But http://jsfiddle.net/3n1xb343/1/ no longer has the problem. – Michael Sep 16 '14 at 23:15
  • @Michael Nice, because I already started researching on how you could save the selection and restore it on `keyup` of the Shift key :P For completeness' sake, if you want to do it that way (which I wouldn't recommend but might be fun), you should check out `document.createRange()`, `window.getSelection()` and `rangy`, which is a library that is designed to do this specific job. All of these seem completely cross-browser compatible. Another question in this direction is http://stackoverflow.com/questions/6239857/can-a-selection-object-be-created-without-any-user-interaction. – mechalynx Sep 16 '14 at 23:22
  • and one more link: http://bytes.com/topic/javascript/answers/89542-possible-restore-selection-created-createrange - someone implemented this approach as an answer. – mechalynx Sep 16 '14 at 23:27
  • @ivy_lynx nice link, thanks. – Michael Sep 16 '14 at 23:28
  • Alternatively, you could trap mousedown events instead: http://jsfiddle.net/3n1xb343/2/ – r3mainer Sep 16 '14 at 23:47

0 Answers0