Question

我正在尝试在用户点击框时显示。我试着使用这段代码：

div

但是代码的第二部分，$(document).ready(function(){ $(".hold").mousedown(function(){ $(".box").css("height","200px"); }); $(".hold").mouseup(function(){ $(".box").css("height","0px"); }); });事件在我点击并拖动时不会触发回调。

如何让它发挥作用？

mouseup

Answer 1

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

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

对此的解决方法可能是在开头添加指向所单击元素的指针，然后在文档元素上添加一个事件侦听器，并检查mouseup是否与单击的元素相同。

如果它们不相同，我们将手动触发event.target元素事件，如下所示：

＆＃13;

.hold

＆＃13;

$(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);
    }
  });
});

＆＃13;

.hold{
  background-color: #000;
  width: 20%;
  height: 10px;
}
.box{
  background-color: #f00;
  width: 100%;
}

＆＃13;

值得一提的是，<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hold"></div> <div class="box"></div>上设置的回调函数将在泡沫阶段触发。

Answer 2

尝试以下

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

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

Answer 3

您的代码按原样运行。你想拖动或扩展盒子吗？我只添加了样式。

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

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

以下是您的代码：jsfiddle

单击并拖动jQuery mouseup事件

3 个答案: