当鼠标关闭按钮时，自定义HTML按钮不起作用

我有一个HTML按钮，它包装了一个图片标记并定义了一个onmouseup和onmousedown处理函数。当按钮被按下时，图像变成被按下的图像，当按下图像时，图像变为向上图像。问题在于，如果用户在按下鼠标时将鼠标从按钮上拖出，则不会调用onmouseup事件，因此图像保持按下状态。这是一个发生了什么的例子。尝试单击按钮并将其拖出：http://jsfiddle.net/gsingh93/ubyV8/5/当鼠标关闭按钮时，自定义HTML按钮不起作用

我该如何解决这个问题？

来源

2012-06-10 gsingh2011

呼叫mouseUp事件（）当鼠标离开按钮：

onmouseout="mouseUp();"

来源

2012-06-10 22:00:43 Ray

这工作。为什么它低调？ – gsingh2011

如果mouseup发生在按钮外面，您正在问如何将图像转回。这不符合你的要求。 –

这甚至不能解决您的问题。当你将光标移出按钮时，它会回头。（不是当mouseup） –

你必须使用window作为目标：

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"; 
    } 
});

工作演示：http://jsfiddle.net/DerekL/XTLJ6/

来源

2012-06-10 22:00:05

好吧，我得到它了！我摆脱了图像，并将图像作为按钮的背景。此外，我还实施了一项onmouseout（）调用来解决您的问题。看一看。如果你喜欢就投票！

http://jsfiddle.net/ubyV8/19/

来源

2012-06-10 22:08:06 dziczkzw