事件冒泡 --- 仿select下拉框
要求:点击按钮时,下拉框显示;点击页面其他部分时,下拉框消失;
1. 不靠谱代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 400px;
height: 300px;
background-color: #ccc;
display: none;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn1");
var oDiv = document.getElementById("div1"); oBtn.onclick = function () {
oDiv.style.display = "block";
};
document.onclick = function () {
oDiv.style.display = "none";
};
}
</script>
</head>
<body>
<input id="btn1" type="button" value="show" />
<div id="div1"></div>
</body>
</html>
不靠谱原因:当点击按钮时,(1)点击事件在btn上触发并执行,此时下拉框显示;(2)事件一直向上冒泡,并遇到了定义在document上的点击事件,触发并执行,此时下拉框不显示;
2. 解决方案 --- 组织事件冒泡(event.cancelBubble = true)
oBtn.onclick = function (event) {
oDiv.style.display = "block";
event.cancelBubble = true;
};
事件冒泡 --- 仿select下拉框的更多相关文章
- 仿select下拉框
默认状态下,灰色面板出现.当点击页面按钮以及灰色面板外区域时,面板消失;点击按钮,灰色面板出现;点击灰色面板区域,面板不能消失. 主要考察:事件冒泡与取消事件冒泡. 代码: <!DOCTYPE ...
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)
效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
- jquery操作select下拉框的多种方法(选中,取值,赋值等)
Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...
随机推荐
- ora-01847:月份中日的值必须介于 1 和当月最后一日之间
今天解决了一个奇葩问题: ORA-01847: 月份中日的值必须介于 1 和当月最后一日之间 将数据从一个视图倒入到一个同结构的表中,但是老报错,也就那么几个字段,肉眼真看不出来什么问题,但是既然报这 ...
- Codeforces 884f F. Anti-Palindromize
题 OvO http://codeforces.com/contest/884/problem/F (Educational Codeforces Round 31 - F) 884f 解 题目标签 ...
- LabVIEW:可执行文件运行缺少运行库问题
造冰箱的大熊猫@cnblogs 2018/5/11 上周调试设备网口犯了一个低级错误,今天又搞出一个笑话 目标机上没有LabVIEW开发环境,于是在开发机上将VI打包成可执行程序.在目标机上运行可执行 ...
- angular打包(一): electron
路由问题: 打包成electron前,需要修改 index.html <base href="/"> 成 <base href="./"> ...
- 字符单链表识别数字,字母,其它字符,并分为三个循环链表的算法c++实现
已知一个单链表中的数据元素含有三类字符(即字母字符,数字字符和其它字符),试编写算法,构造三个循环链表,使每个循环链表中只含有同一类的字符,且利用原表中的结点空间作为这三个表的结点空间. 实现源代码: ...
- noi.ac #528 神树和排列
题目链接:戳我 #include<iostream> #include<cstring> #include<cstdio> #include<algorith ...
- 小程序日期格式(yyyy-MM-dd HH:mm:ss)转(yyyy/MM/dd HH:mm:ss)
let newDate = (date).replace(/-/g, '/'); var date = new Date(newDate).getTime();
- Spring——代理工厂实现增强
借助Spring IOC的机制,为ProxyFactory代理工厂的属性实现依赖注入,这样做的优点是可配置型高,易用性好. 1.创建抽象主题 public interface ProService { ...
- 数据分析师面经一(bk)
2019年第一个数据分析面试: 先说一下心理感受,在BOSS多次看到这个岗位了,但是 呢一直没勇气去投这个岗位.首先毕竟是一个知名企业一万+人的公司,心里多少底气不足(小公司待习惯了吧),而且看岗位要 ...
- Jmeter(六)关联之XPath提取器
如果请求返回的消息为xml或html格式的,可以用XPath提取器来提取需要的数据 以http://www.weather.com.cn/为例: 先新建一个HTTP请求GetCityURL,获取城市天 ...