Javascript 将鼠标拖离按钮时自定义HTML按钮不起作用

我有一个HTML按钮，它包装了一个图像标签，并定义了

onmouseup

和

onmouseudown

处理程序。当按下按钮时，图像变为按下的图像，当按下按钮时，图像变为向上的图像。问题是，如果用户在鼠标按下时将鼠标从按钮上拖下来，则不会调用

onmouseup

事件，因此图像将保持按下状态。下面是一个例子。尝试单击按钮并将其拖离：

---

如何解决此问题？

您必须使用

窗口作为目标：

document.getElementsByTagName("button")[0].addEventListener("mousedown", function(){
    document.getElementById("image").src = "http://www.clogsmusic.com/padma/redCircle50x50.gif";
    window.onmouseup = function(){
        document.getElementById("image").src = "http://creativeenergyblog.files.wordpress.com/2008/05/blue-circle.jpg?w=50&h=50";
    }
});

工作演示：当鼠标离开按钮时调用mouseUp（）：

onmouseout="mouseUp();"

好的，我明白了！我去掉了图像，改为将图像作为按钮的背景。我还实现了一个onmouseout（）调用条件来解决您的问题。看一看。如果你愿意，就投票吧

您正在询问，如果鼠标在按钮外，如何将图像转回。这并不能满足你的要求，甚至不能解决你的问题。当您将光标移出按钮时，它将返回。Derek——这是我试图解决的问题：“问题是，如果用户在鼠标按下时将鼠标从按钮上拖下来，则永远不会调用onmouseup事件，因此图像保持在按下状态。”。我的解决方案解决了这个问题。你的也一样，但我打赌我可以更快地键入我的。当用户甚至没有释放按钮时，它会返回。两个处理程序都需要mouseUp。这可能应该被添加到答案中，尽管我很快就明白了。