jquery 在不删除event.target的情况下清除svg元素的子节点的最快方法

ckx4rj1h  于 12个月前  发布在  jQuery
关注(0)|答案(2)|浏览(122)

**编辑:**如果jQuery在子元素上挂接了任何事件,则使用$.empty,否则会发生内存泄漏。

我正在为我的SVG小部件添加pinching支持。大约有50个或更多的SVG子节点。我使用以下代码在touchmove或pointermove期间绘制小部件。

function pinchMoveHandler(event){
    var svg = this.widgetObject;
    event.target.id = "";
    event.target.setAttribute("opacity", 0);

    //do not remove event.target during touchmove or pointermove
    //If removed, event will be suspended
    svg.appendChild(event.target);
    while(svg.childNodes.length > 1)
         svg.removeChild(svg.firstChild);

    //Scaling and re-rendering operations will take place here
    this.drawWidget(event);
}

字符串
问题是,svg删除缓慢(在IE11中连续pointermove事件期间为40毫秒),因为即使我不移动手指,指针移动也会一个接一个地触发。在JavaScript中清除SVG元素的最快方法是什么?jQuery解决方案也可以接受。

**注意:**正常情况下,SVG删除时间小于10毫秒

06odsfpq

06odsfpq1#

jQuery解决方案;

$("#mySVG").empty();

字符串

jQuery Solution-2;(Prevent target)

$(svg).children().not(':last').remove();

jQuery Solution-3;(防止目标)

$(svg).find('*').not(':last').remove();

jQuery Solution-4;(重新追加目标)

$(svg).empty().append(event.target);

建议的解决方案;

如果你没有其他的操作要做,我建议你;“做一个清晰的拷贝”的SVG。我的意思是,创建新的(空的)SVG,并用它替换旧的。

ix0qys7i

ix0qys7i2#

从2020年开始,你可以调用svgElement.replaceChildren()来快速清空一个节点。

相关问题