用于插入新预标签的JavaScript事件处理程序

我有一组3个可编辑的预标签。当某人在其中一条线上并点击'输入'时，我希望它在下面（在文档树中）插入一个新标签，它位于该标签上。我试图在标签上放置一个事件处理程序，以便发生这种情况，但'onkeypress'似乎没有被解雇。用于插入新预标签的JavaScript事件处理程序

<script> 
    function handlers(){ 
     var pres = document.getElementsByTagName("pre"); 
     for(i=0; i<pres.length;i++){ 
      pres[i].addEventListener("onkeypress", function(e){ 
       if(e.which != 13) return;//the ENTER key 
       var tag = e.srcElement; 
       if(tag.nextSibling){ 
        var next = tag.nextSibling; 
        var newPre = document.createElement('pre'); 
        tag.nextSibling = newPre; 
        newPre.nextSibling = next; 
       } 
      var tree = document.getElementById("tree"); 
      tree.innerHTML = document.getElementByTagName().length; 
      }); 
     } 
    } 
</script> 
<body onload="handlers();"> 
    <div id="editor" contentEditable="true"> 
     <pre>1</pre> 
     <pre>2</pre> 
     <pre>3</pre> 
    </div> 

    <div> 
    <p id="tree"></p> 
    </div> 
</body>

来源

2012-01-06 Chris

您正在迭代元素数组，但未正确附加事件侦听器。

我建议改变你的for循环：

for (var i=0, l=pres.length; i<l; i++) { 
    pres[i];//This is where the Element is stored 
}

您可以在安装事件侦听器here

而且阅读起来，它会出现：http://jsfiddle.net/vZYpX的按键事件的“CONTENTEDITABLE”下的源是“contentEditable”的实际元素。因此，您必须使<pre>的内容可编辑（而不是div），或将侦听器附加到父div（即当前的contentEditable）。

来源

2012-01-06 22:40:30 Shad

哦哎呦我做的蟒蛇的迭代是通过一个数组，而不是通过JS的属性。我相应地修改了它，并添加了正确的事件侦听器，但仍然没有看到任何东西 – Chris 2012-01-07 02:54:51

@Chris addEventListener采用不带'on'前缀的事件类型。例如'pres [i] .addEventListener（“keypress”，function（e）{' – Shad 2012-01-07 03:00:34

）哦，他们只是偷偷摸摸地对着你。好吧，现在很好，我在函数的开头部分提醒一下，看它是否得到 – Chris 2012-01-07 03:42:37

我不确定''onkeypress'可以从'pre'标签中被解雇。

但是我有一个建议： 1.注册document.onmousemove来检测鼠标位置。 2.注册document.onkeypress事件，当检测到'enter'键时，检查鼠标是否在'pre'标签上。如果是这样，运行你的代码。

它应该是这样的：

function moveMoveHandler(e) 
{ 
    var evt = window.event || e; 
    window.lastMouseX = evt.clientX; 
    window.lastMouseY = evt.clientY; 
} 


function keypressHandler(e) 
{ 
    var evt = window.event || e; 

    // handling only 'enter' key 
    if (evt.keyCode !== 13) return; 

    // getting the element the mouse is on 
    var elem = document.elementFromPoint(window.lastMouseX,window.lastMouseY); 
    var node = elem; 
    // checking if the found node is a child of a 'pre' node 
    while (node.nodeName !== "PRE" && node !== document.body) 
      node = node.parentNode;   

    if (node.nodeName === "PRE") 
    { 
     ... INSERT YOUR CODE HERE ... 
    } 
} 


// IE 
if (window.attachEvent) 
{ 
    document.attachEvent("onkeypress", keypressHandler); 
    document.attachEvent("onmousemove", moveMoveHandler); 
} 
// other browsers 
else 
{ 
    document.addEventListener("keypress", keypressHandler, false); 
    document.addEventListener("mousemove", moveMoveHandler, false); 
}

来源

2012-01-06 23:18:39 Omeriko

pre有一个onkeypress处理程序，因为它是可编辑的。解决方案的问题在于，当输入被击中时，鼠标可能不会悬停在该特定的预标签上。需要担心IE :) – Chris 2012-01-07 02:56:34

克里斯，我不知道我理解你的评论。在我的解决方案中，当用户点击'输入'键时，我们检查鼠标是否悬停了预标签，并且可以输入任何您想要的条件... – Omeriko 2012-01-07 13:16:03

用于插入新预标签的JavaScript事件处理程序

回答

相关问题