Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jquery实现点击某元素之外触发事件

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

作者头像
山河木马
发布于 2019-03-05 09:22:52
发布于 2019-03-05 09:22:52
2.9K00
代码可运行
举报
文章被收录于专栏:山河木马山河木马
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
    $(function(){
        $(document).click(function (e) { 
            if (!$(e.target).is('.program_rooms')) { 
                $(".room_change").slideUp('slow'); 
                $(".program_rooms").attr("data-sure","0"); 
            } 
        });
    })
</script>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('body').click(function(e) {
 var target = $(e.target);
 // 如果#overlay或者#btn下面还有子元素,可使用
 // !target.is('#btn *') && !target.is('#overlay *')
 if(!target.is('#btn') && !target.is('#overlay')) {
 if ( $('#overlay').is(':visible') ) $('#overlay').hide();
 }
});
$('body').click(function(e) {
 if(e.target.id != 'btn' && e.target.id != 'overlay')
 if ( $('#overlay').is(':visible') ) $('#overlay').hide();
})
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/04/13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript学习笔记(四)—— jQuery入门
子元素伪类选择器就是选择某一个元素下面的子元素的方式,在jQuery中,子元素伪类选择器分为两大类:
wsuo
2020/07/31
11.3K0
第86节:Java中的JQuery基础
jquery是一种快速,小巧,功能丰富的JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用的一种api,可以在多种浏览器中工作。
达达前端
2019/07/03
3K0
第86节:Java中的JQuery基础
E026Web学习笔记-JQuery(四):动画、遍历、事件、插件
訾博ZiBo
2025/01/06
570
E026Web学习笔记-JQuery(四):动画、遍历、事件、插件
Web前端JQuery入门实战案例
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
达达前端
2019/07/03
4K0
前端基础:jQuery
jQuery 能做的 JavaScript 也都能做,但使用 jQuery 能大幅提高开发效率
RendaZhang
2020/09/08
13.6K0
前端基础:jQuery
jQuery学习笔记
jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档
Mirror王宇阳
2020/11/13
7.6K0
jQuery学习笔记
50个必备的实用jQuery代码段
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"} }); 解决
大师级码师
2021/09/19
6.9K0
04 . 前端之JQuery
JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便
iginkgo18
2020/09/27
3.5K0
程序员都会的 35 个 jQuery 小技巧
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){     $(document).bind("contextmenu",function(e){             return false;     }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the 
用户7999227
2021/09/23
2.6K0
jQuery基础系列
jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。
达达前端
2019/07/03
2.7K0
jQuery基础系列
jQuery基础
使用jQuery快速高效制作网页交互特效 第一章-JavaScript基础 上机练习1 练习——统计包含“a”或“A”的字符串的个数 需求说明:使用数组存储一组字符串,并统计包含“a”或“A”的字符串的个数 关键代码: <script type="text/javascript"> var a = ["America","Greece","Britain","Canada","China","Egypt"]; var count = 0; for(var i in a) {
星辰xc
2022/04/09
7.6K0
jQuery基础
22.jQuery(实例)
1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关" /> <div class="c
zhang_derek
2018/04/11
1.7K0
JQuery碎碎念
1 JQuery最佳实践 1.1 使用JQuery的ready处理器 $(function () { /* 你的代码 */ }); //或者 $(document).ready(function () { /* 你的代码 */ }); 1.2 用noConflict()避免冲突并定义别名 $jq = jQuery.noConflict(); $jq(function () { /* 你的代码 */ } 1.3 缓存JQuery对象及链式调用 1.3.1 错误的方式 //错误
IT架构圈
2018/06/01
5.7K0
前端开发者都应知道的 jQuery 小技巧
Matt Smith 发起的一个小项目,目前已有 15 个 小技巧。伯乐在线会持续跟进更新。
李维亮
2021/07/09
2.5K0
jQuery 简介
https://www.runoob.com/jquery/jquery-syntax.html
zhangjiqun
2024/12/17
1370
jQuery 简介
jquery入门
运用jQuery时,需要在页面中引入jQuery文件 jQuery的hello world <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>helloworld</title> <!-- 1. 在页面中引入jQuery支持 --> <script src="js/jquery-1.12
周小董
2019/03/25
3K0
flask 鼠标进入时显示弹窗(flask 99)
$(function () { var default_error_message = 'Server error, please try again later.';
用户5760343
2019/08/21
1K0
JQuery各种点击事件的区别
在工作中,经常用到js的点击事件,有好多种表现形式,今天抽空总结一下它们的区别与联系。废话不多说,开始写测试案例。首先声明,本人水平有限,如果有错误之处,还请指正。
用户6182664
2019/09/05
3.1K0
JavaWeb——JQuery之高级操作应用及实践案例总结(动画、遍历、事件绑定)
【注意】:如果遍历中加判断条件,当前function返回为false,则结束循环(相当于js中使用的break),如果返回为true,则结束本次循环,继续下次循环(相当于js中使用的continue);
Winter_world
2020/09/25
9.6K0
JavaWeb——JQuery之高级操作应用及实践案例总结(动画、遍历、事件绑定)
jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)
Python攻城狮
2018/08/23
2.4K0
jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示
相关推荐
JavaScript学习笔记(四)—— jQuery入门
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验