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

Question

我的代码类似于：

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

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

输入框的代码如下：

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

问题是，如果我尝试在输入框中选择文本，则父onclick和onblur会激活。我想编辑输入框，直到我点击（或按回车）。

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

编辑（实际代码）：

<div class="plBoxContainer">
<a href="playlists" onClick="playlists(id); return false;" onMouseOver="if(RUNPLAYLIST){this.getElementsByTagName('span')[0].style.textDecoration='underline'}" onMouseOut="this.getElementsByTagName('span')[0].style.textDecoration='none'">
<br><span class="folderName">Some Name</span>
<span class="plEdit" onClick="PlEditBox(this.previousSibling); document.getElementById('dummydiv').innerHTML=id;">&nbsp;</span>
Some text</a>
</div>

JS：

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
}

Answer 1

我认为您应该在函数中使用event.returnValue = false / event.preventDefault来防止事件冒泡。喜欢

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

有关详情，请参阅http://mootools.net/docs/core/Types/DOMEvent#Event:stop

Answer 2

JS Fiddle目前不允许在迁移服务器时进行保存/共享。与此同时，这篇文章底部的截图可能有所帮助。

看起来你正在使用纯Javascript，但我使用YUI来抽象出偶数归一化;没有人应该为此烦恼！ ：）

基本上DIV元素的事件处理程序实际上不会做任何事情，除非DIV是真正的偶数目标（即直接点击DIV而不是内部的INPUT）。

在Firefox中

（右键单击＆gt;查看图片以查看完整尺寸。）

更新

我制作了另一个显示名称的JS Fiddle，如果单击它则将其转换为编辑框，并在INPUT失去焦点或按下ENTER键时保存值（返回简单显示）。

在Firefox中

（右键单击＆gt;查看图片以查看完整尺寸。）