经过在Chrome、IE和Firefox上测试,发现在按钮上按下鼠标,拖动到按钮外松开,可以触发mousedown事件,但无法触发mouseup和click事件。在这种情况下,如果想触发按钮的mouseup和click事件,应该怎么做呢?
解决方法:
定义一个JS变量,表示按钮是否按下,初始化为false。在按钮mousedown事件的响应函数里,将这个变量置为true。然后监听整个页面的mouseup事件,在响应函数里,判断变量是否为true;如果不是true,啥都不做;如果是true,说明之前刚刚按下了按钮,就调用按钮的mouseup或click响应函数,同时将变量置为false。
也可以用hidden元素(<input type="hidden">)或按钮的隐藏属性来记录按钮的状态。
一个例子:
<!DOCTYPE html>
<html>
<head>
<title>buttonTest.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<br>
<br>
<button type="button" id="button1" _status="up">Click</button>
<div id="infoDiv"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").mousedown(function(){
$(this).attr("_status", "down");
$("#infoDiv").append("<div>Mouse down</div>");
});
$("body").mouseup(function(){ // 也可以用$(document).mouseup
if ($("#button1").attr("_status")=="down") {
$("#button1").attr("_status", "up");
$("#infoDiv").append("<div>Mouse up</div>");
}
});
$("#button1").click(function(){
$("#infoDiv").append("<div>Mouse clicked</div>");
});
});
</script>
</body>
</html>