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

调用高亮功能时，selectionchange 的 EventListener 会无限触发，直到我清除选择。

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

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