Javascript 如何处理；点击"；事件，即使元素从光标下方移动到mousedown和mouseup之间？

我有一个

和一个

输入有一个

onblur

事件处理程序，它（有时）会导致

被移动；如果用户将注意力集中在

，点击

（点击完成前，它会从指针下方移动），则当前必须将指针移动到按钮的新位置，然后再次点击。这种体验并不理想

我希望用户只需单击一次

（但在

失去焦点时必须保留按钮移动的功能）。但是，如果用户在mouseup之前将鼠标向下移动到按钮上，然后将鼠标指针移开（包括从应用程序切换焦点），则不应触发任何单击事件（正常情况下）

我看不到任何基于处理

onmousedown

和/或

onmousedup

的方法在某些边缘情况下不容易出错。我所能想到的就是在

onblur

处理程序中强制移动光标，以便完成单击（如果确实需要的话？），但这可能也是一种糟糕的用户体验

如何最好地处理这个问题

$（“按钮”）。单击(
$（“
”）
.children（'输入'）
.blur（函数（）{
如果（！this.value.length）
这个.parentElement.remove（）；
})
.end（），
职能（e）{
e、 data.clone（true）
.appendTo（$（this）.data（'target'））
.children（'输入'）
.focus（）；
}
);

列表1+

列表2+
一种方法是在一秒钟内淡出元素，而不是立即淡出，这让用户有时间在按钮移动之前完成单击：

$(this.parentElement).fadeOut("slow", function() {
    $(this).remove();
});

现场示例：


$（“按钮”）。单击(
$（“
”）
.children（'输入'）
.blur（函数（）{
如果（！this.value.length）
$（this.parentElement）.fadeOut（“慢”，function（）{
$（this.remove（）；
});
})
.end（），
职能（e）{
e、 data.clone（true）
.appendTo（$（this）.data（'target'））
.children（'输入'）
.focus（）；
}
);

列表1+

列表2+
首先克隆，然后将原始对象的不透明度设置为0。然后，让它在点击或模糊时消失…@RubyRacer：当文档流发生变化时，保持原始对象的位置很难。有什么想法吗？我的想法中没有一个是为了这个而喊“优雅”。一个悬停（模态或非模态）的克隆怎么样，在鼠标上方，不管下面发生什么都会被修复？谢谢你的这些想法。我没有考虑过让每个列表滚动，但实际上每个列表中只有少量的项目，所以固定的大小要么太小，滚动不好，要么太大，浪费了很多空间。“正确”的解决方案可能是为每个输入提供一个删除按钮，而不是自动删除空输入，但我们希望尽可能避免这种情况。我认为淡出可能是一个可以接受的折衷方案，我倾向于接受这个答案，但我会留一点时间，以防出现其他想法。