javascript - 如何从li执行命令？

Question

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

更新： ** jsFiddle **

HTML

<div contenteditable=true>
    paragraph1<br/>
    paragraph2<br/>
    paragraph3
</div>
<div contenteditable=true>
    paragraph4<br/>
    paragraph5<br/>
    paragraph6
</div>
<input type=button id=show value=ToggleMenu>
<ul id=submenu>
    <li>p</li>
    <li>h1</li>
    <li>h2</li>
</ul>

Javascript

$("#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");
});

Answer 1

您可以执行以下操作：

• 使用mousedown而不是click
• 阻止默认事件行为
• 获取相关<li>内容
• 称呼document.execCommand()

演示：http: //jsfiddle.net/timdown/SNtyY/13/

代码：

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();
});

Answer 2

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

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

而不是li用作单击事件的选择器，请尝试

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

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

小提琴