Javascript 向动态创建的span标记添加onclick

这似乎是一件小事，但由于某种原因，我无法让它工作

我试图使用execk命令高亮显示contenteditable div标记内的文本。但是，我不能使用“hiliteColor”参数，因为我还想向span标记添加onclick事件（以便能够再次删除突出显示）。下面是函数的外观：

export function highlight(color){
  //remove any format to avoid overlap issues
  document.execCommand('removeFormat', false, null);
  //save selected text
  var text = "";
  if (window.getSelection) {
      text = window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
      text = document.selection.createRange().text;
  }
  //create new span around the text
  var span = document.createElement("span");
  span.style.backgroundColor = color;
  span.onclick = doSomething();  // <-------------------------------- ISSUE
  span.innerText = text;
  document.execCommand('insertHTML', false, span.outerHTML);
}

function doSomething(){
  alert('I was clicked!');
}

导出功能高亮显示（彩色）{
//删除任何格式以避免重叠问题
document.execCommand（'removeFormat'，false，null）；
//保存所选文本
var text=“”；
if（window.getSelection）{
text=window.getSelection（）.toString（）；
}else if（document.selection&&document.selection.type！=“控制”）{
text=document.selection.createRange（）.text；
}
//围绕文本创建新的跨距
var span=document.createElement（“span”）；
span.style.backgroundColor=颜色；
span.onclick=doSomething（）；//alert（'test'）；

，但是onclick永远不会添加到span标记中。在上面的行中添加样式可以

如果这很重要的话，我会在React应用程序中这样做

如何将函数附加到此跨度？或者是否有完全不同的方法来进行高亮显示

---

谢谢。

我怀疑

span

标记中的文本是空字符串

//案例1
让hasText=document.createElement（“span”）
hasText.innerText=“我是span元素”
hasText.onclick=（）=>console.log（“单击-文本”）
hasText.style.background=`red`
document.body.appendChild（hasText）
//案例2
让noText=document.createElement（“span”）
noText.onclick=（）=>console.log（“单击-无文本”）
noText.style.border=`绿色`
document.body.appendChild（noText）

如果您使用

React

我建议使用

React

来创建和

ReactDOM

来呈现元素。您可以像

import ReactDOM from "react-dom";

然后可以创建和渲染元素

let SpanElement =  React.createElement(
          "span",
          {
            style: { backgroundColor: "#0099FF"}, //Color Here
            id: "SpanID",
            className: "SpanClassName",
            onClick: () => doSomething()
          },text);


     // First Argument element to Render, Second Argument: Node to Render at
     ReactDOM.render(SpanElement, document.getElementById("root")); 

---

span.setAttribute（'onclick'，'myFunction'）；

#注意：-myFunction without（）使用

span.addEventListener（“click”，doSomething）；

@NotABot感谢您的回答。检查html，这实际上会将onclick添加到span中。但是，它说我的函数没有定义。“doSomething未在HtmlPanelement.onclick上定义”。编辑：删除myFunction周围的引号，看起来该函数已被添加，但单击它时没有任何反应。@AbdullahAbid我尝试过这样做，如描述中所述，但由于某些原因无效。@JesperF.添加此

span.setAttribute（'onclick'，myFunction（）'））；

带（）它会起作用。这是有意义的，我看到我在添加文本之前添加了onclick。但是，我尝试添加默认文本，以及在之后添加它，但它仍然没有添加到范围中。此外，当我检查元素和/或控制台日志时，范围内有文本。它具有style属性，但没有onclick。如果您是inspe在chrome developer tools中，您不会获得任何HTML元素的事件属性。您在哪里将span附加到文档正文？基本上，当我调用

document.execCommand（'insertHTML'，false，span.outerHTML）时，如果span未附加到文档，您如何单击span；

。它基本上插入了我在光标位置创建的跨度。它（稍微）工作，因为创建了范围，其中包含正确的文本以及背景色样式。请看，我考虑过这样做。但我不知道如何将其添加到光标位置。在该函数中使用execCommand将浏览器中高亮显示的文本替换为该元素。因此我无法在root.cou处渲染它您是否可以通过

codesandbox

或

codepen

提供一个工作示例？抱歉，我不确定是否可以使用React和我正在使用的模块等设置代码笔。无论如何，感谢您的帮助。