jQuery 单击和拖动时的 mouseup 事件

Question

我试图在用户单击框时显示 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>

Answer 1

试试下面的方法

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

jsfiddle link https://jsfiddle.net/w47anse9/

Answer 2

您的代码按原样运行。您是要拖动还是展开框？我只是给它添加了样式。

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

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

这是 fiddle 和您的代码：jsfiddle

Answer 3

正如指出的那样，问题是当您在 .hold 元素上按下鼠标键，然后将鼠标移到其他地方并离开该键时，给定的处理程序在 mouseup 不会被调用，因为它是在 .hold 元素上设置的。

从技术上讲，事件的目标在那种情况下会有所不同，因此它不会匹配 .hold 元素，最终不会触发 mouseup 事件的回调函数。

对此的解决方法是在开头添加指向被点击元素的指针，然后在文档元素上添加事件侦听器并检查 event.target 是否与被点击元素相同。

如果不相同，我们将手动触发.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上设置的回调函数会在冒泡阶段触发

jQuery 单击和拖动时的 mouseup 事件

jQuery mouseup event on click and drag

javascript

jquery

html

mousedown

mouseup