Javascript 如何执行李的命令？

当我的菜单li选项被单击时，我将失去对contentEditable的关注，因此当我尝试执行命令时，选择不再存在，并且不会影响选择。如何在不添加输入的情况下解决此问题

更新：

HTML

---

代码的一个问题是它不符合HTML。例如，子菜单应为

<ul id = 'submenu'>
  <li>p</li>
  <li>h1</li>
  <li>h2</li>
</ul>

这会在单击事件上抛出一个警报框，因此您知道单击正在注册

---

您可以执行以下操作：

• 使用

  鼠标向下

  而不是

  单击

• 防止默认事件行为
• 获取相关的
  的内容
• 调用

  document.execCommand（）

演示：

代码：

---

单击正在注册，您可以在浏览器控制台中看到console.log。很抱歉，我5分钟前才注意到并纠正了这个问题。但是，execCommand在div上不起作用。您所说的“不符合HTML”是什么意思？OP的HTML是完全有效的。属性周围的引号通常是可选的。@TimDown，如果您查看编辑历史记录，现在的

实际上是带有

子元素的
。@Jason:很公平：）对不起。我想您最好的选择是这样。@Teemu是的，我想是这样，我试图避免这样做，但无论如何，谢谢。您是否尝试过在单击处理程序中的execCommand之前聚焦contenteditable？@rgthree我不知道具体怎么做，因为页面中有几个这样的容器，您有没有示例？单击下面的选项时，最后一段必须改变，我很困惑。我试图从代码中找出你的意图，但显然弄错了。别担心，我可能没有很好地解释自己。
$("#show").on("click",function(){
    $("#submenu").toggle();
});
$("#submenu").on("click","li",function(){  //when this is clicked, editable div loses focus.
    document.execCommand("formatBlock", false, $(this).text());
    console.log($(this).text(), "was clicked");
});

<ul id = 'submenu'>
  <li>p</li>
  <li>h1</li>
  <li>h2</li>
</ul>

$("#submenu").on("click", "li", function(){
   document.execCommand("formatBlock", false, $(this).text());
   alert($(this).text());
});

var $submenu = $("#submenu");

$("#show").on("click",function(){
    $submenu.toggle();
});

$submenu.mousedown("li",function(e){
    var li = e.target;
    e.preventDefault();
    document.execCommand("formatBlock", false, $(li).text());
});

$submenu.click(function(e) {
    e.preventDefault();
});