首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在div外部单击和隐藏,以及当我将其拖动到div外部时保持隐藏(mouseup,mousedown...)Jquery

在div外部单击和隐藏的需求可以通过以下步骤实现:

  1. 首先,给需要隐藏的div添加一个唯一的id属性,例如id="myDiv"。
  2. 使用jQuery库,可以通过以下代码来实现在div外部单击隐藏的效果:
代码语言:txt
复制
$(document).mouseup(function(e) {
  var container = $("#myDiv");

  // 如果点击的目标不是myDiv本身且不是myDiv的子元素,则隐藏myDiv
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.hide();
  }
});

上述代码中,mouseup事件会在鼠标按键松开时触发。当点击的目标不是myDiv本身且不是myDiv的子元素时,即点击了div外部区域,就会隐藏myDiv。

  1. 如果需要在将div拖动到div外部时保持隐藏,可以在mousedown事件中添加一个标记,表示鼠标是否按下。然后在mouseup事件中判断该标记,如果为true,则隐藏myDiv。
代码语言:txt
复制
var isMouseDown = false;

$(document).mousedown(function(e) {
  var container = $("#myDiv");

  // 如果点击的目标是myDiv本身或myDiv的子元素,则将isMouseDown标记为true
  if (container.is(e.target) || container.has(e.target).length > 0) {
    isMouseDown = true;
  } else {
    isMouseDown = false;
  }
});

$(document).mouseup(function(e) {
  var container = $("#myDiv");

  // 如果isMouseDown为true且点击的目标不是myDiv本身且不是myDiv的子元素,则隐藏myDiv
  if (isMouseDown && !container.is(e.target) && container.has(e.target).length === 0) {
    container.hide();
  }

  isMouseDown = false; // 重置isMouseDown标记
});

上述代码中,mousedown事件会在鼠标按下时触发,mouseup事件会在鼠标按键松开时触发。当点击的目标是myDiv本身或myDiv的子元素时,将isMouseDown标记为true,表示鼠标按下。在mouseup事件中,如果isMouseDown为true且点击的目标不是myDiv本身且不是myDiv的子元素,则隐藏myDiv,并重置isMouseDown标记。

以上是使用jQuery实现在div外部单击和隐藏的方法。关于jQuery的更多用法和详细介绍,可以参考腾讯云的jQuery产品文档:jQuery产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券