Jonathan Weiß

Note: this is a really old article which I never finished at first. As I had some time waiting at the airport, I managed to finish the article and the demo site. ;-)

Some months ago I mentioned how to prevent the browser from selecting HTML elements. While I was working on an early prototype of a new functionality, I discovered an interesting pit fall in handling events in all browsers.
When I tried to move an HTML element, suddenly it was not moved on the screen. Furthermore it seemed that no mouse event was handled to my functions. I double checked that the event handles were assigned to the specified element and also checked the functions which should be called on the mouse events.
It was like something strange cut off the event handle and did not inform my functions about the mouse move. It took me a while to notice the strange new cursor which my Firefox showed. The browser showed a typically drag-and-drop cursor. By selecting the GUI element, I unnoticed selected some text which lay inside this element!
When you select text in your gecko-based browser you can drag it into places like the address, a textarea or create a bookmark based on the selected content. This is a nice feature, but it is important to know this internal method has priority against JavaScript functions which are bound to events.
I have created a little test page on which you can have a look at this behavior.

So, remember: internal browser events are fired before custom events.

There are many situations in which you don't want the browser to select the text (or selectable element, e.g. an image), when the user is moving the mouse holding the left mouse button. Especially during drag-and-drop actions this browser behavior will look strange and confuse the user.
To prevent this action on Internet Explorer, first add the proprietary event onselectstart to the particular element. Then assign a function which returns false.
On Gecko bases browsers you have to use the CSS attribute -moz-user-select. The prefix "-moz" shows, that this attribute (as many others, e.g. -moz-border-radius) is a proprietary one and will not work on other browers. The expression -moz-user-select:none; will prevent the browser from it's normal selecting behavior.