I made a paging control and I noticed that while clicking on the buttons it is very easy to accidentally select the individual images and text. Is it possible to prevent this?
To clarify selecting I mean highlighting with the mouse. (Try dragging your mouse from one side of the screen to the other.)
If you try to highlight the text/controls in this grid it can't be selected. How is that done? Link
dragging and selecting both initialize on a mouse down event and update on subsequent mouse moves. When you handle the events to begin dragging, or to follow the mouse, cancel the event's bubbling and override the default browser return:
something like this in your begin dragging mousedown and move handlers-
e=e || window.event; pauseEvent(e);
function pauseEvent(e){
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble=true;
e.returnValue=false;
return false;
}
For dragging, you're capturing the mousedown and mousemove events. (And hopefully touchstart and touchmove events as well, to support touch interfaces.)
You'll need to call event.preventDefault() in both the down and move events in order to keep the browser from selecting text.
For example (using jQuery):
var mouseDown = false;
$(element).on('mousedown touchstart', function(event) {
event.preventDefault();
mouseDown = true;
});
$(element).on('mousemove touchmove', function(event) {
event.preventDefault();
if(mouseDown) {
// Do something here.
}
});
$(window.document).on('mouseup touchend', function(event) {
// Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element.
mouseDown = false;
});
This is a very old post. It may not answer exactly that situation, but i use CSS for my solution:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;