Question

当我向文档中添加文本节点时，有时会选择/突出显示该节点。

使用以下代码，当我在红色矩形外面单击时，文本被正确添加（未被选中）。

当我在红色矩形内部单击时，文本显示为已选中。单击任意位置后，将删除选择，并且无法再选择文本。

任何人都可以解释发生了什么以及如何解决这个问题吗？

如果moz标签没有放弃，我会使用Firefox。

演示...... https://jsfiddle.net/ncbxh73s/9/

的小提琴

Answer 1

这是一种解决方法。

＆＃13;

document.documentElement.addEventListener("click", foo);
function foo()
{
    document.documentElement.removeEventListener("click", foo);
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text");
    t.textContent = 'foo';
    t.setAttribute('id', "text_");
    t.setAttribute('x', 20);
    t.setAttribute('y', 20);
    // Make all text unselectable...across all browsers
    t.setAttribute('style', '-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;');
 
    var box = document.getElementById('box');
    box.parentNode.insertBefore(t, box);
    document.querySelector('svg').deselectAll();

}

＆＃13;

<html><body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect id="box" width="250" height="28" fill="none" stroke="white" pointer-events="visible"/>
</svg>
</body></html>

＆＃13;

如何在没有初始选择的情况下使用javascript将不可选文本添加到svg？

1 个答案: