我试图div在用户单击一个框时显示一个。我尝试使用此代码：
$(document).ready(function(){
$(".hold").mousedown(function(){
$(".box").css("height","200px");
});
$(".hold").mouseup(function(){
$(".box").css("height","0px");
});
});
但是，在代码的第二部分中，mouseup当我单击并拖动时，该事件不会触发回调。
如何使其运作？
<!DOCTYPE html>
<html>
<head>
<title>click and hold project</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="hold"></div>
<div class="box"></div>
<script src="jquery-2.2.3.min.js"></script>
<script src="app.js"></script>
</body>
</html>
正如@wahwahwah指出的那样，问题在于，当您在.hold元素上按下鼠标键，然后将鼠标移到其他位置并留下键时，mouseup将不会调用给定的处理程序，因为它是在.hold元素上设置的。
从技术上讲，在这种情况下，事件的目标会有所不同，因此它将与.hold元素不匹配，并且最终mouseup将不会触发事件的回调函数。
一种解决方法是在开头添加指向clicked元素的指针，然后在document元素上添加一个事件侦听器，并检查元素是否event.target与clicked元素相同。
如果它们不相同，我们将.hold手动触发元素的事件，如下所示：
$(document).ready(function(){
var mouseTarget;
$(".hold").on('mousedown', function(){
$(".box").css("height", "200px");
mouseTarget = this;
})
.on('mouseup', function(){
$('.box').css("height", "0px");
});
$(document).on('mouseup', function(e) {
if (e.target !== mouseTarget) {
$(mouseTarget).trigger(e.type);
}
});
});.hold{
background-color: #000;
width: 20%;
height: 10px;
}
.box{
background-color: #f00;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hold"></div>
<div class="box"></div>值得一提的是，在上设置的回调函数document将在冒泡阶段触发。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句