Question

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

我该如何解决这个问题？

Answer 1

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

Answer 2

当鼠标离开按钮时调用mouseUp（）：

onmouseout="mouseUp();"

Answer 3

好的我明白了！我摆脱了图像，使图像成为按钮的背景。我还实现了一个条件onmouseout（）调用来处理你的问题。看一看。如果你愿意，可以投票！

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

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

3 个答案: