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

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

1 个答案: