backbone 查看和 window.getSelection

Question

我无法让 window.getSelection 在 backbone.js 视图中工作。

否则视图工作正常，但每当我 select 一些文本，然后单击触发 window.getSelection 函数的测试按钮时，selection 总是显示为空。

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

这是我的测试代码：

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

无论我 select，我总是在控制台中得到这个：

select离子范围：（空串）

有什么技巧可以让它在 backbone.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 anywhere 收听。如果您只关心一个特定的 <element>（或元素范围，如视图中的所有 <p>），我会使用该元素。

您还可以查看正在运行的 fiddle。（感谢@nikoshr 提供了基础 fiddle）

backbone 查看和 window.getSelection

backbone view and window.getSelection

jquery

backbone.js