Double Click Selects Text in dynamically added H1, how do I stop this?

Question

I want to make an element dbl clickable, and when they do it, it selects text which is a little ugly. Is there a way to deselect text with JavaScript (or jQuery) or just make it not select text in the first place? Its on an <h1> element by the way.

Also, some have suggested:

$.fn.extend({ 
        disableSelection: function() { 
            this.each(function() { 
                if (typeof this.onselectstart != 'undefined') {
                    this.onselectstart = function() { return false; };
                } else if (typeof this.style.MozUserSelect != 'undefined') {
                    this.style.MozUserSelect = 'none';
                } else {
                    this.onmousedown = function() { return false; };
                }
            }); 
        } 
    });

However, this doesn't work unless i call it every time the new H1 is generated... Any ideas?

Answer 1

I found this with a quick google:

http://chris-barr.com/entry/disable_text_selection_with_jquery/

Looks like exactly what you need. Basically every browser has a unique text selection implementation, and this jQuery snippet sniffs the browser and stops the text selection for each element you specify using CSS or JavaScript events, depending on which is needed.

Answer 2

This will do it in all the major browsers, though it does unfortunately select text and then unselect it again when you double click:

document.ondblclick = function() {
    if (window.getSelection) {
        window.getSelection().removeAllRanges();
    } else if (document.selection) {
        document.selection.empty();
    }
};