如何在不影响元素的其余部分和任何事件侦听器的情况下覆盖元素文本的一部分

Question

我有这段代码，它由 Adoboe 的 RoboHelp 2017 自动创建到我的 HTML5 生成的帮助文件中：

<object id="MapCtrl" classid="CLSID:A8ECFBF5-08CC-4065-BD74-0FAD1EA61317" data-rhtags="1" class="" width="1" height="1">
</object>
<p style="font-family:Arial;font-size:12pt;font-weight: normal;font-style: normal;text-decoration: none;" data-rhtags="1" class="" align="left">In&nbsp;this&nbsp;Topic&nbsp;<a class="dropspot" href="javascript:TextPopup(this)" id="MTHotSpot46267"><span class="MTText" style="display: none;">Show</span><span class="MTText">Hide</span></a></p>

我正在尝试使用 javascript 通过本地化字符串动态修改 In this Topic  文本的实例，而不影响锚标记中的显示/隐藏 link。

这是我目前的尝试：

function localizeMiniTOC(){
    const minitoc = document.querySelector('#MapCtrl + p');
    const text = minitoc.textContent;
    console.log (typeof text);
    console.log(text.includes('In\xa0this\xa0Topic'));
    if (text.includes('In\xa0this\xa0Topic') === true){
        let html = minitoc.innerHTML;
        linkStart = html.indexOf('<a');
        remaining = html.substring(linkStart,html.length);
        minitoc.innerHTML = 'En Este Tema ' + remaining;
    }
}

这确实改变了文本，但我遇到的问题是，这也破坏了 RoboHelp 创建的事件侦听器。例如，在我上面的代码之前，原来的 Firefox Inspector 是这样的。

注意有这个事件侦听器：

这是我上面的代码之后的样子。

现在没有事件侦听器：

我今天做了一些研究，我从这个 link 了解到使用 .innerHTML“删除内部数据，如事件监听器”：

但我似乎无法找到一种不同的方法来覆盖锚标记之前的文本，但保留显示/隐藏 link 和事件听众毫发无损。

我尝试过的其他事情：

基于此页面（Is it possible to append to innerHTML without destroying descendants' event listeners? ), 我尝试过使用 .insertAdjacentHTML()，但它也没有用：

minitoc.insertAdjacentHTML('beforebegin','<p>En\xa0Este\xa0Tema\xa0' + remaining + '</p>');

（linked 页面中的示例显示了如何通过附加到现有元素来执行此操作，但我需要覆盖通向锚标记的文本，而不是附加到元素。）

我尝试使用 .setAttribute 重新创建 onclick 事件： minitoc.setAttribute('onClick()',TextPopup('MTHotSpot46267'));
我尝试重新创建事件侦听器，但也没有用： minitoc.addEventListener('click', TextPopup('MTHotSpot46267'));

所有在线示例似乎都处理追加或前置，而不是覆盖文本。

如何使用本地化字符串动态覆盖 In this Topic  文本而不影响显示/隐藏 link 和那些 link 上的事件侦听器？

Answer 1

也许没有办法在不破坏事件处理程序的情况下覆盖文本，但我确实设法修复了我的代码，这样它现在至少可以重新添加事件处理程序在 minitoc.innerHTML = 'En Este Tema ' + remaining; 行重写我的段落之后。

这是我更新后的函数：

function localizeMiniTOC(){
    const minitoc = document.querySelector('#MapCtrl + p');
    const anchor = document.querySelector('#MapCtrl + p > a');
    const text = minitoc.textContent;
    if (text.includes('In\xa0this\xa0Topic') === true){
        let html = minitoc.innerHTML;
        linkStart = html.indexOf('<a');
        remaining = html.substring(linkStart,html.length);
        if (anchor.id.includes('MTHotSpot') === true){
            minitoc.innerHTML = 'En Este Tema ' + remaining;
            minitoc.addEventListener('click', function(e){
                if (e.target.tagName === 'SPAN' && e.target.className==="MTText"){
                    TextPopup(anchor.id);
                }
            });
        }
    }
}

请注意，我在最初尝试的变通方法中出现错误，以重新添加事件侦听器。在这个不正确的代码中，我忽略了在第二个参数中正确调用该函数：

minitoc.addEventListener('click', TextPopup('MTHotSpot46267'));

这是固定代码（取自我更新的函数）：

minitoc.addEventListener('click', function(e){
  if (e.target.tagName === 'SPAN' && e.target.className==="MTText"){
  TextPopup(anchor.id);
}

这导致事件侦听器被添加到段落中，然后只需确保我在运行 TextPopup 函数之前单击 span 标记即可。

在这张照片中，您可以看到添加的事件：

如何在不影响元素的其余部分和任何事件侦听器的情况下覆盖元素文本的一部分

How can I overwrite a portion of an element's text without affecting the rest of the element and any event listeners

javascript

innerhtml

event-listener

robohelp