javascript - 当父 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