Por qué obtener una selección de texto de textarea funciona cuando se hace clic en un botón pero no cuando se hace clic en un "div" (en Internet Explorer)

Considere el siguiente código: emostración de @Live aquí: abrir en Internet Explorer 7 o 9)

HTML:

<textarea>Hello Stack Overflow</textarea>
<input class="a" type="button" value="Click here does the job" />
<div class="a">But clicking here not :(</div>

JS:

    function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {start: start, end: end};
}


function getselection() {
  var selectedText = getInputSelection($("textarea")[0]);
  var start = selectedText.start;
  var end = selectedText.end;
  alert("Start: " + start + ", End: " + end);
}

$(".a").click(getselection);

LosgetInputSelection()a función @ se toma deaqu.

Por alguna razón, cuando el<div>e hace clic en @, el resultado es siempre:

Start: 0, End: 0

Hay alguna idea de cómo arreglar eso

Respuestas a la pregunta(2)

Su respuesta a la pregunta