事件委托小demo(jq版)
<style type="text/css">
* {
margin:;
padding:;
} .box1 {
width: 200px;
height: 60px;
background: #00A3AF;
} .box2 {
width: 200px;
height: 200px;
background: #ee6600;
display: none;
}
body{height: 100%;}
</style>
<div class="box">
<a class="box1">啦啦啦</a>
<div class="box2">我是展开的部分~~</div>
</div>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var $box1 = $('.box1');
var $box2 = $('.box2');
$('body').on('touchstart', function (e) {
if (judgeCondition(e)) {
// 如果点击的是按钮,或者展开的那个盒子,显示
$box2.show();
} else {
// 否则隐藏
$box2.hide();
}
})
function judgeCondition(e) {
var $target = $(e.target);
// 点击的是按钮
if ($target.hasClass('box1')) {
return true;
}
// 点击的是展开的那个盒子
if ($target.closest('.box2').length) {
return true;
}
return false;
}
</script>
只有点击的按钮和展开区域本身不隐藏,否则都隐藏。
事件委托小demo(jq版)的更多相关文章
- 事件委托小demo(原生版)
<style type="text/css"> body, div, span { margin:; padding:; font-family: "\5FA ...
- hadoop streaming编程小demo(python版)
大数据团队搞数据质量评测.自动化质检和监控平台是用django,MR也是通过python实现的.(后来发现有orc压缩问题,python不知道怎么解决,正在改成java版本) 这里展示一个python ...
- 关于js中的事件委托小案例
需求:页面上有一个按钮,和一个空的ul,要求点击按钮,会给ul中动态添加li元素,然后,点击动态添加的元素,在控制台上输出,这是第几个元素 <ul> </ul> <but ...
- JQ 为未来元素添加事件处理器—事件委托
随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
- JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
随机推荐
- Bullet_Point_Py
1. if __name__ == "__main__" Term: 模块最高级的代码:模块中没有缩进的代码 Principal 1: 第一次导入模块会执行模块最高级的代码.不管你 ...
- 在Wamp 添加站点和域名
在httpd.conf中使Include conf/extra/httpd-vhosts.conf生效 在conf/extra/httpd-vhosts.conf中加入如下代码 <Virtual ...
- Java 4
1.继承的问题 子类是父类的一个扩展,子类可以利用父类的属性与行为,这种情况子类会破坏父类的封装 为了保持父类良好的封装性,设计父类有以下规则: 如果要把某类设计为最终类则需要添加final修饰符,或 ...
- IOS中实例的权限控制
@public.@protected.@private的使用 在OC中声明一个类的时候,可以使用上面 @public.@protected.@private三个关键字声明实例的权限,例如下面的代码: ...
- netty初探(1)
参考目录: 1. user-guide : http://netty.io/wiki/user-guide-for-4.x.html 2. demo: http://netty.io/wiki/ 3. ...
- poj 3524 Charm Bracelet(01背包)
Description Bessie has gone to the mall's jewelry store and spies a charm bracelet. Of course, she'd ...
- 解决MySQL 在 Java 检索遇到timestamp空值时报异常的问题
使用JDBC检索MySQL数据库,如果遇到timestamp字段的值为空,那么会立即报出异常: ### Error querying database. Cause: java.sql.SQLExc ...
- IOS开发—UITableView重用机制的了解
引言 对于一个UITableView而言,可能需要显示成百上千个Cell,如果每个cell都单独创建的话,会消耗很大的内存.为了避免这种情况,重用机制就诞生了. 假设某个UITableView有100 ...
- 洛谷-笨小猴-NOIP2008提高组复赛
题目描述 Description 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设m ...
- 一把刀终极配置Win7/8版 v2.0 绿色版
软件名称: 一把刀终极配置Win7/8版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win8 / Win7 软件大小: 1.3MB 图片预览: 软件简介: 一把刀终极配置 For Win ...