jquery实现点击某元素之外触发事件

川长思鸟来 2022-05-04 08:30 671阅读 0赞

jq如何实现这个功能呢？其实也不难，大概思路就是，在document上面绑定一个事件，当用户触发document的事件时，判断一下目标元素是什么，然后再执行相应的操作就行了。

CODE:

<script>
        $(function(){
            $(document).bind("click",function(e){
                //id为menu的是菜单，id为open的是打开菜单的按钮            
                if($(e.target).closest("#menu").length == 0 && $(e.target).closest("#open").length == 0){
                //点击id为menu之外且id不是不是open，则触发
                    close();
                }
            })
        })
    
        function close(){
            //close menu...
        }
    
        function open(){
             //open menu...
        }
    </script>

## closest() 方法 ##

### 定义和用法 ###

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。   
语法

.closest(selector)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>selector</td> 
   <td>字符串值，包含匹配元素的选择器表达式。</td> 
  </tr> 
 </tbody> 
</table>

如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。  
\---------------------   
作者：\_Icecream   
来源：CSDN   
原文：https://blog.csdn.net/leebe/article/details/49515065

发表评论取消回复

表情：

评论列表（有 0 条评论，671人围观）

还没有评论，来说两句吧...

相关阅读

相关 GeckoFx (7)触发html元素的click点击事件

定义： browser：Gecko.GeckoWebBrowser 控件；目标：　使用 xpath 查询元素，并触发元素的点击事件。

港控/mmm°/ 2024年02月17日 18:13/ 0 赞/ 60 阅读

相关 jquery点击事件(jquery触发点击事件onclick)

jquery实现远程http的get请求用哪个事件？jquery ![jquery点击事件][jquery] jquery实现远程http的get请求用哪个事件？jq

系统管理员/ 2023年09月26日 15:01/ 0 赞/ 192 阅读

相关 jQuery判断点击事件是否位于div之外

点击效果： ![20191014173722590.gif][] HTML <div id="outer"> <div id="inner" st

Myth丶恋晨/ 2023年06月07日 10:57/ 0 赞/ 25 阅读

相关 Vue实现自动触发点击事件

directives:{ trigger:{ inserted(el, binging){ console.l

灰太狼/ 2023年01月01日 01:53/ 0 赞/ 347 阅读

相关【jQuery】点击特定区域才触发事件

1.说明我们可以使用jQuery轻松监听各种事件，比如说点击、双击、鼠标进入等等，但是那是全局了，如果我们想要在某个组件才发生操作，比如说在某个div内右键才会弹窗自定

本是古典何须时尚/ 2022年10月07日 09:58/ 0 赞/ 304 阅读

相关 css隐藏元素触发点击事件,纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯js实现的小代码段。我这里整理了纯css实现

电玩女神/ 2022年09月02日 14:51/ 0 赞/ 296 阅读

相关关于jQuery ajax无法触发点击事件的问题

问题 jQuery ajax无法触发点击事件 $(document).ready(function () { v

超、凢脫俗/ 2022年05月18日 10:56/ 0 赞/ 259 阅读

相关 jquery实现点击某元素之外触发事件

　　jq如何实现这个功能呢？其实也不难，大概思路就是，在document上面绑定一个事件，当用户触发document的事件时，判断一下目标元素是什么，然后再执行相应的操作就行了

川长思鸟来/ 2022年05月04日 08:30/ 0 赞/ 672 阅读

相关点击子元素却也触发父元素的点击事件

> 在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较

╰半橙微兮°/ 2022年03月17日 12:44/ 0 赞/ 641 阅读

相关 JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的点击事件

现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。![2016

心已赠人/ 2021年06月10日 20:41/ 0 赞/ 709 阅读