logo标签列表

jQuery鼠标松开事件在点击并拖动时的应用

javascriptjqueryhtmlmousedownmouseup
3

我想让用户点击一个方框时显示一个 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>
你的问题是，当你点击并拖动时，方框仍然保留，即使你想要隐藏它？这是因为你没有在 .box 中进行“mouseupping”。 - wahwahwah
3个回答
2
正如 @wahwahwah 指出的，问题在于当您在 .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>

值得一提的是，在文档上设置的回调函数将在冒泡阶段触发。
0

请尝试以下操作

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

jsfiddle链接 https://jsfiddle.net/w47anse9/

0

你的代码已经可以正常工作了。你是想拖动或者扩展这个框吗？我只是给它添加了样式。

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

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

这里有一个与你的代码相关的Fiddle：jsfiddle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接