Javascript 当父div具有onclick处理程序时，如何在动态添加的输入框中选择文本？

我有类似的代码：

<div id="div1" onclick="myfunc()">
    <span class="myspan"></span>
</div>

现在，如果用户单击页面其他位置的按钮，则会将一个输入框动态添加到跨度中。该按钮还提供输入框焦点

输入框的代码如下所示：

<input type=text onkeypress="runthis()" onblur="runthis()">

问题是，如果我尝试在输入框中选择文本，则父对象onclick和onblur会触发。我想编辑输入框，直到单击“离开”（或按enter键）

---

这基本上是一个快速编辑框。用户单击编辑按钮时，会出现输入框。他们单击out或按enter键，然后保存

编辑（实际代码）：

JS:

函数PlEditBox（folderName）{
RUNPLAYLIST=0；
name=folderName.innerHTML；
folderName.innerHTML=''；
document.getElementById（'folderNameChange'）.focus（）；
document.getElementById（'folderNameChange'）.select（）；
}
函数PlDoEdit（值、id、e）
{
var键码；
如果（window.event）keycode=window.event.keycode；
如果（e&&e！=blur）keycode=e，则为else；
else键代码=“”；
if（keycode==13 | | e=='blur'）
{
RUNPLAYLIST=1；
//在这里做一些无关的事情
返回false；
}
否则返回true；
}
功能播放列表（plID）
{
如果（RUNPLAYLIST==0）
{
RUNPLAYLIST=1；
返回false；
}
//在这里做一些无关的事情
}

我认为应该在函数中使用event.returnValue=false/event.preventDefault来防止事件抖动。像

event.preventDefault ? event.preventDefault() : event.returnValue = false;

---

有关更多信息，请参见JS Fiddle在迁移服务器时不允许保存/共享。同时，在这篇文章的底部有一个截图可能会有所帮助

看起来您使用的是纯Javascript，但我使用YUI抽象掉了均匀的规范化；谁都不应该为此烦恼！：）

基本上，DIV元素的事件处理程序实际上不会执行任何操作，除非DIV是真正的偶数目标（即直接单击DIV而不是其中的输入）

（右键单击>在Firefox中查看图像，查看完整大小。）

更新 我制作了另一个JS提琴，它显示一个名称，如果你点击它，它就会变成一个编辑框，当输入失去焦点或按下ENTER键时，会保存该值（返回到简单显示）

（右键单击>在Firefox中查看图像，查看完整大小。）

---

什么是“父onclick和onblur”处理程序？你说的“父母”是什么意思？除了

输入

本身上的onblur处理程序外，没有其他onblur处理程序。我指的是父onclick和输入框onblur+1，因为这将起作用，但您可能不希望阻止事件传播。您还可以让

myFunc（）

什么都不做，除非#div1是实际的事件目标。Heera的答案需要一些事件规范化。你可能想考虑使用一个框架来抽象它。我有一个使用YUI的解决方案，但JSFIDLE目前不允许保存，因此我无法链接到它（谢谢。我想你误读了，我问了代码应该放在哪里。在这种情况下，我已经让myFunc返回了，但它仍然不允许我选择文本，onblur仍然启动。我尝试更改文本框样式的z索引，但没有帮助。我想这是因为输入框本身在div中。我没有误读。我只是提供了Heera方法的另一种选择。你也不能直接将代码放入方法中，因为它缺少事件规范化。如果你想让他的方法工作，你需要向runthis（）添加一个事件参数（例如runthis（e））并添加“e=e | | window.event”，然后Heera的：“e.preventDefault？e.preventDefault（）：e.returnValue=false；”.在评论中有点难读，嗯？：PCodes应该放在runthis（e）{…}函数中，并遵循Brendan的方法。我只给了你核心的想法。谢谢Brendan！谢谢。看起来你基本上是在myfunc中进行返回。我也在这样做（尽管返回值为false；）它仍然会触发blur方法上的输入框。我认为我没有正确理解您的需求。如果您不想在单击

模糊输入时运行this（）做任何事情，那么您可以在

运行this的主体中执行类似的目标检测（即
如果（e.target==Y.one（#div1”）{return；}
）（）

。如果我单击div，我希望它运行this（）。但是如果我在输入框内单击，我希望能够在不运行this（）的情况下选择文本触发。这基本上是一个快速编辑框。用户单击编辑按钮，就会出现输入框。他们单击out或按enter键，然后保存。选择输入中的文本时不应触发

onblur

事件。在我的屏幕截图示例中，在Firefox 9.0.1上运行，

runthis（）

仅当在输入框中键入某个内容时，或当它确实失去焦点时（而不是在选中文本时）才会触发。即使是DIV的

onclick

也仅当单击DIV本身（而不是其子项）时才会触发。如果您获得不同的行为，则应提供源代码以及运行它的浏览器。

function PlEditBox(folderName){
    RUNPLAYLIST = 0;
    name = folderName.innerHTML;
    folderName.innerHTML = '<input type=text id="folderNameChange" value="'+name+'" onkeypress="return PlDoEdit(this.value, document.getElementById(\'dummydiv\').innerHTML, event);" onBlur="PlDoEdit(this.value, document.getElementById(\'dummydiv\').innerHTML, \'blur\')">';
    document.getElementById('folderNameChange').focus();
    document.getElementById('folderNameChange').select();
}

function PlDoEdit(value, id, e)
{
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e && e != blur) keycode = e.which;
    else keycode = '';

    if (keycode == 13 || e == 'blur')
    {
        RUNPLAYLIST = 1;
        //do some unrelated stuff here
        return false;
    }
    else return true;
}

function playlists(plID) 
{
    if(RUNPLAYLIST==0)
    {
            RUNPLAYLIST = 1;
            return false;
    }
    //do a bunch of unrelated stuff here
}

event.preventDefault ? event.preventDefault() : event.returnValue = false;