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

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();
    }
};