按下鼠标并拖到按钮外松开，如何触发click事件？

81 阅读 0 评论 54 点赞

我是靠谱客的博主平常汽车，最近开发中收集的这篇文章主要介绍按下鼠标并拖到按钮外松开，如何触发click事件？，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

经过在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>