javascript - JavaScript selectionchange-EventListener，在document.execCommand上无限触发

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";
}

当调用 highlight 函数时，EventListenerfor selectionchange 会无限触发，直到我清除选择。

有没有人面临同样的问题？任何人都可以提出解决此问题的解决方案吗？

Answer 1

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

演示：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);