首页 > 其他分享 >如何检测元素外部的点击?

如何检测元素外部的点击?

时间:2023-10-30 23:35:34浏览次数:46  
标签:function 菜单 外部 检测 元素 click 点击 stopPropagation

内容来自 DOC https://q.houxu6.top/?s=如何检测元素外部的点击?

我有一些HTML菜单,当用户点击这些菜单的头部时,我会完全显示它们。我希望在用户点击菜单区域外时隐藏这些元素。

这是否可以通过jQuery实现?

$("#menuscontainer").clickOutsideThisElement(function() {
    // 隐藏菜单
});

注意:使用stopPropagation应该避免,因为它会破坏DOM中正常的事件流。有关更多信息,请参阅此CSS Tricks文章。考虑改用此方法。

将点击事件附加到文档主体以关闭窗口。将单独的点击事件附加到容器以停止传播到文档主体。

$(window).click(function() {
  //如果菜单可见,则隐藏菜单
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

标签:function,菜单,外部,检测,元素,click,点击,stopPropagation
From: https://www.cnblogs.com/xiaomandujia/p/17799216.html

相关文章

  • 异常值检测
    想象一个房间里充满了彩色气球,每个气球都象征着数据集中的一个数据点。由于其不同的特征,气球漂浮在不同的高度。现在,想象一些充满氦气的气球出乎意料地飞得远远高于其他气球。正如这些特殊的气球会破坏房间的均匀性一样,异常值也会破坏数据集中的模式。从这个丰富多彩的类比回到纯粹......
  • 使用RxJava实现多次连续点击的事件监听
    说起响应试编程,要提到的当然是Rx系列的库了,Rx系列的库对于很多语言和平台的运用是非常广泛的,例如(.NET,Java,Scala,Clojure,JavaScript,Ruby,Python,C++,Objective-C/Cocoa,Groovy等等。而本篇将会记录如何使用RxJava对Android点击事件的监听以异步数据流的方式来进行处理,......
  • 使用maven引入依赖包 快捷键 alt+insert 点击 dependency
    使用maven引入依赖包快捷键alt+insert点击dependency1.打开maven项目中的pom.xml文件2.找到dependencies标签,按alt+insert快捷键3.输入想要导入的依赖,并点击需要的版本搜索可能需要等待一下4.点击在右上方出现的按钮,重新加载maven等待加载完成依赖就添加完成......
  • JS点击空白关闭弹窗的方式
    12$(document).mouseup(function(e){3varpop=$('popDialog');4if(!pop.is(e.target)&&pop.has(e.target).length===0){5//可以在这里关闭弹窗6somecode...7}8});9判断点击事件发生在区域外的两个条件:点......
  • uniapp项目APP端安卓ios权限检测教程
    导语:在APP的日常开发过程中,权限检测与授权是不可避免的一项重要的功能,下面就简单介绍一下如何检测和授权的方法。目录原理方法实战原理此授权方法主要是依托于HTML5产业联盟的HTML5+规范实现的。HTML5产业联盟官网获取当前操作系统名称可以使用uni.getSystemInf......
  • 玉米病害检测:基于深度学习的YOLO模型的应用【玉米病害检测实战】
    随着人工智能技术的快速发展,其在农业领域的应用也越来越广泛。玉米作为重要的粮食作物之一,在生长过程中容易受到各种病害的侵害,这对玉米产量和质量造成了严重的影响。因此,利用人工智能技术对玉米病害进行快速准确的检测和诊断具有重要的意义。本文将介绍基于深度学习的YOLO(YouOnly......
  • 基于CNN卷积神经网络的口罩检测识别系统matlab仿真
    1.算法运行效果图预览   2.算法运行软件版本matlab2022a 3.算法理论概述       新型冠状病毒可以通过呼吸道飞沫等方式传播,正确佩戴口罩可以有效切断新冠肺炎病毒的传播途径,是预防感染的有效措施。国内公众场合要求佩戴口罩。而商场、餐饮、地铁等人员密集......
  • 抖音点赞和公屏检测回复,不完整程序
    fromseleniumimportwebdriverimporttimeimportpickleedge=webdriver.Edge()edge.maximize_window()#设置最大等待时长为10秒edge.implicitly_wait(10)edge.get('https://www.douyin.com/')time.sleep(1)input("登入抖音账号后,请输入任意键继续...")time.slee......
  • 基于图像识别的自动驾驶汽车障碍物检测与避障算法研究
    基于图像识别的自动驾驶汽车障碍物检测与避障算法研究是一个涉及计算机视觉、机器学习、人工智能和自动控制等多个领域的复杂问题。以下是对这个问题的研究内容和方向的一些概述。障碍物检测障碍物检测是自动驾驶汽车避障算法的核心部分,它需要从车辆的感知数据中识别出所有可......
  • 串口占用检测工具
    串口占用检测工具平时需要检测哪个程序占用了串口,下面介绍一款非常方便的工具,它的工具箱里包含一个串口占用检测工具,可以非常方便的检测出来哪个程序占用了串口,并给出程序名和PID。官网下载地址:http://www.redisant.cn/mse......