8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

HamZa Samha 1月前

73 0

我有一些 HTML 菜单,当用户点击这些菜单的顶部时,这些菜单会完全显示出来。当用户点击菜单区域之外的区域时,我想隐藏这些元素。就像这样...

我有一些 HTML 菜单,当用户点击这些菜单的顶部时,这些菜单会完全显示出来。当用户点击菜单区域之外的区域时,我想隐藏这些元素。

使用 jQuery 可以实现这样的效果吗?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});
帖子版权声明 1、本帖标题:如何检测元素外部的点击?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由HamZa Samha在本站《css》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 这里的其他解决方案对我来说不起作用所以我不得不使用:

    if(!$(event.target).is('#foo'))
    {
        // hide menu
    }
    

    编辑:纯 Javascript 变体(2021-03-31)

    我使用此方法来处理单击下拉菜单外部时关闭下拉菜单的情况。

    首先,我为组件的所有元素创建了一个自定义类名。该类名将添加到组成菜单小部件的所有元素中。

    const className = `dropdown-${Date.now()}-${Math.random() * 100}`;
    

    我创建了一个函数来检查点击次数和被点击元素的类名。如果被点击元素不包含我上面生成的自定义类名,则应将标志设置 show false ,菜单将关闭。

    const onClickOutside = (e) => {
      if (!e.target.className.includes(className)) {
        show = false;
      }
    };
    

    然后我将点击处理程序附加到窗口对象。

    // add when widget loads
    window.addEventListener("click", onClickOutside);
    

    ...最后是一些琐事

    // remove listener when destroying the widget
    window.removeEventListener("click", onClickOutside);
    
返回
作者最近主题: