骨干视图和window.getSelection

Question

我在使window.getSelection在lobe.js视图内工作时遇到麻烦。

否则，该视图就可以正常工作，但是无论何时我选择一些文本，然后单击触发window.getSelection函数的测试按钮，选择始终显示为空。

我认为这可能与我的视图以及视图附加到页面的方式有关。

这是我的测试代码：

return Backbone.View.extend({

    tagName: 'div',
    className: 'test',
    template: _.template(tmpl, null, { }),

    events: {
        "click .testSelection": "testSelection"
    },

    initialize: {...}
    render: {...}

    testSelection: function () {
        if (window.getSelection) {
            console.log('selection range: ', document.getSelection().toString());
        }
    }
});

无论我选择什么，我总是在控制台中得到它：

选择范围：（空字符串）

有什么技巧可以使其在骨干.js中工作？

谢谢！

Answer 1

@ adeneo是正确的。 一旦您单击，就可以有效地破坏选择范围。 尽管如此，对于您的问题，有一个简单的解决方法：保存原始选择。 只需调整以下属性：

events: {
    "mouseup": "testSelection",
    "click .testSelection": "getSelection"
},

testSelection: function () {
    this.currentSelection = window.getSelection();
},

getSelection: function() {
    console.log(this.currentSelection.toString());
}

此处的关键是保存选择。 您以后可以使用它进行任何操作（例如单击<button>在控制台中显示它）。

请注意 ，我将视图设置为在视图中的任何地方监听mouseup 。 如果您只关心一个特定的<element> （或元素范围，如视图中的所有<p> ），则可以使用该元素。

您还可以查看工作提琴 。 （提供基础小提琴的信用额为@nikoshr）