Javascript 单击并拖动时的jQuery鼠标悬停事件_Javascript_Jquery_Html_Mousedown_Mouseup

Javascript 单击并拖动时的jQuery鼠标悬停事件

javascript jquery html

Javascript 单击并拖动时的jQuery鼠标悬停事件,javascript,jquery,html,mousedown,mouseup,Javascript,Jquery,Html,Mousedown,Mouseup,当用户单击一个框时，我试图显示一个div。我尝试使用以下代码： $(document).ready(function(){ $(".hold").mousedown(function(){ $(".box").css("height","200px"); }); $(".hold").mouseup(function(){ $(".box").css("height","0px"); }); }); 但是代码的第二部分，mouseup事件在我单击并拖动时不会触发

当用户单击一个框时，我试图显示一个

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>


单击并按住项目

尝试以下操作

$(document).ready(function(){
  $(".hold").mousedown(function(){
    $(".box").css("height","200px");
  })
  .mouseup(function(){
    $(".box").css("height","0px");
  });
});

jsiddle link

您的代码按原样工作。您正在尝试拖动或展开长方体吗？我只添加了样式

.hold {
  width: 50px;
  height: 50px;
  background-color: yellow;
}

.box {
  width: 100px;
  background-color: black;
}

这里是对代码的处理：

正如前面所指出的，问题是当您在

.hold

元素上按鼠标键，然后将鼠标移到其他位置并保留该键时，

mouseup

上的给定处理程序将不会被调用，因为它是在

.hold

元素上设置的

从技术上讲，在这种情况下，事件的目标将不同，因此它将与

.hold

元素不匹配，并且最终不会触发

mouseup

事件的回调函数

解决方法是在开始处添加指向单击元素的指针，然后在文档元素上添加事件侦听器，并检查

event.target

是否与单击的元素相同

如果它们不相同，我们将手动触发

.hold

元素的事件，如下所示：

$（文档）.ready（函数（）{
var-mouseTarget；
$（“.hold”）.on（'mousedown'，function（）{
$（“.box”）.css（“高度”，“200px”）；
mouseTarget=这个；
})
.on（'mouseup'，function（）{
$（'.box'）.css（“高度”，“0px”）；
});
$（文档）.on（'mouseup'，函数（e）{
如果（例如，目标！==mouseTarget）{
$（mouseTarget）.trigger（e.type）；
}
});
});
。等一下{
背景色：#000；
宽度：20%；
高度：10px；
}
.盒子{
背景色：#f00；
宽度：100%；
}
您的问题是，当您单击并拖动该框时，即使您希望将其隐藏，该框仍然存在吗？这是因为你没有在.box