拖动鼠标关闭按钮时自定义 HTML 按钮不起作用答案

【问题标题】：Custom HTML Button not working when dragging mouse off button拖动鼠标关闭按钮时自定义 HTML 按钮不起作用
【发布时间】：2012-06-10 21:53:01
【问题描述】：

我有一个 HTML 按钮，它包装了一个图像标签，并定义了一个 onmouseup 和 onmousedown 处理程序。当按钮向下时，图像变为按下的图像，当它向上时，它变为向上的图像。问题是，如果用户在按钮按下时将鼠标从按钮上拖开，则永远不会调用 onmouseup 事件，因此图像会保持按下状态。这是正在发生的事情的一个例子。尝试单击按钮并将其拖出：http://jsfiddle.net/gsingh93/ubyV8/5/

我该如何解决这个问题？

【问题讨论】：

标签： javascript html button dom-events

【解决方案1】：

当鼠标离开按钮时调用 mouseUp()：

onmouseout="mouseUp();"

【讨论】：

您正在询问如果鼠标上移发生在按钮之外，如何将图像转回。这并不能满足您的要求。
这甚至不能解决您的问题。当您将光标移出按钮时，它将返回。（不是当 mouseup 时）
Derek - 这是我试图解决的问题：“问题是如果用户在按钮按下时将鼠标从按钮上拖开，则永远不会调用 onmouseup 事件，因此图像会保持按下状态状态”。我的解决方案解决了这个问题。你的也是，但我敢打赌我的打字速度会更快。
当用户甚至没有释放按钮时它就返回了。
两个处理程序都需要 mouseUp。这可能应该添加到答案中，尽管我很快就发现了这一点。 jsfiddle.net/gsingh93/ubyV8/21

【解决方案2】：

你必须使用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/

【讨论】：

【解决方案3】：

好的，我明白了！我摆脱了图像并将图像作为按钮的背景。我还实现了一个条件 onmouseout() 调用来处理您的问题。看一看。喜欢就投票吧！

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

【讨论】：