How to bind a handler to a selection change on window?

Question

Basically I need to know when the window.getSelection() has changed and bind a handler to this event. Ideas?

OBS: Please note that I'm not looking to bind a selection change on a INPUT or TEXTAREA. I'm talking about any selection in the window.

Answer 1

2019 update

All major browsers now support the selectionchange event, which does the job. Firefox was the last browser to get it, and it has had it without a configuration flag since version 52 (released in March 2017).

Original answer

There is no cross-browser way of detecting changes to the selection. IE (since version 5.5, I think) and WebKit/Blink browsers (Chrome, Safari and Opera version from the last couple of years, for example) support a selectionchange event on the document which does exactly what you want.

Firefox and pre-Blink Opera have no such event and all you can do is detect selection changes made via keyboard and mouse events, which is unsatisfactory (there is no way of detecting "Select All" from context or edit menus, for example), or simply poll the Selection object returned by window.getSelection() (checking the selection's anchorNode, anchorOffset, focusNode and focusOffset properties against their previous values should be sufficient).

Answer 2

There is no cross-browser event for that.

However, there does exist an event called selectionchange, which trigger on every change in a selection in the document, but it is only supported in IE and recent WebKit (Chrome/Safari), so no Firefox/Opera.

You can use the selectionchange event like this:

$(document).on('selectionchange', function(e) {
    console.log('selectionchange', e.originalEvent); 
});

jsfiddle example

Answer 3

I'd argue that the selectionchange event is too greedy, and you want to watch the mouse events. The handler is the easy part. Returning the selected nodes is the important part! Adapting Tim Down's answer here this is what I came up with:

    $(document).on('mouseup', function(e) { 
    
            //cool! jQuery object containing all nodes (elements) that were just selected
            var $selNodes = $().getSelectedNodes();
            if ($selNodes.length)
                     alert('user selected something');
            
            //so now I can do work on just the elements I am interested in that were selected
            if($selNodes.filter('.justTheClassIwant').length)
                alert('user selected the elements I want to watch');
        });
    
    jQuery.fn.extend({
    getSelectedNodes: function() {
        if (window.getSelection) {
            var sel = window.getSelection();
            if (!sel.isCollapsed) {
                var range = sel.getRangeAt(0);
                var node = range.startContainer;
                var endNode = range.endContainer;

                // Special case for a range that is contained within a single node
                if (node == endNode) {
                    return [node];
                }

                // Iterate nodes until we hit the end container
                var rangeNodes = [];
                while (node && node != endNode) {
                    if (node.hasChildNodes()) {
                        node = node.firstChild;
                    } 
                    else {
                        while (node && !node.nextSibling) {
                            node = node.parentNode;
                        }
                        node = node.nextSibling;
                    }
    
                    rangeNodes.push(node);
                }

                // Add partially selected nodes at the start of the range
                node = range.startContainer;
                while (node && node != range.commonAncestorContainer) {
                    rangeNodes.unshift(node);
                    node = node.parentNode;
                }

                return jQuery(rangeNodes);
            }
        }
        return jQuery([]);
    }
});