JavaScript selectionchange-EventListener，在document.execComma

Question

我为selectionchange添加了一个事件侦听器，如下所示，

document.addEventListener("selectionchange", 
function()
{
    highlight();
    console.log("selectionchange-triggered");
}, false);

然后我添加了以下代码，以突出显示选定的文本。

function highlight()
{
    document.designMode = "on";
    document.execCommand("hiliteColor", false, "#ff0000");
    document.designMode = "off";
}

调用突出显示函数时，选择更改的EventListener将无限触发，直到我清除选择。

有没有人遇到同样的问题？任何人都可以提出解决这个问题的解决方案吗？

Answer 1

我建议使用一个简单的标志来防止无限循环。window.setTimeout()调用之所以存在，是因为调用document.execCommand()时 selectionchange 事件不会同步触发。

演示：http://jsfiddle.net/rzmstcot/5/

法典：

var highlighting = false;
function highlight()
{
    document.designMode = "on";
    highlighting = true;
    document.execCommand("hiliteColor", false, "#ff0000");
    document.designMode = "off";
    window.setTimeout(function() {
        highlighting = false;
    }, 1);
}
document.addEventListener("selectionchange", 
function()
{
    if (!highlighting) {
        highlight();
    }
    console.log("selectionchange-triggered");
}, false);