事件冒泡 --- 仿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 ...
随机推荐
- 【ZJOI 2016】旅行者
题意 http://uoj.ac/problem/184 题解 大概是神题. 网格图上跑最短路有一个经典的优化方式:分治分组跑最短路. 对于这道题,设矩形长为 \(n\),宽为 \(m\),则对 \( ...
- PAT乙级1011
题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805312417021952 题解 很明显这题是考数值范围的,i ...
- VSCode远程连接Docker
一.Docker开启远程访问 [root@local host ~]# vi /lib/systemd/system/docker.service #修改ExecStart这行 ExecStart=/ ...
- (九)zabbix监控web应用
1)web应用监控介绍 使用zabbix自带的web场景可以监控url的状态码,响应时间,url的下载速度,非常的棒 思路:定义模板-->创建应用集--->定义web场景--->定义 ...
- BZOJ1821 部落划分[最小生成树]
方法一:套路性的,二分距离,然后把距离点对距离小于答案的边都联通起来,然后看集合数量超过k说明答案小,增大,否则减小. 方法二:贪心,类kruskal.n个点,k个连通块,则需要有效连接(同一个块内的 ...
- 经常使用的js三元表达式
语法:条件?表达式1:表达式2 . 条件的括号可要可不要的 let istrue = true; let a = (istrue === true) ? '我是true啊' : "我是fa ...
- 【leetcode】1282. Group the People Given the Group Size They Belong To
题目如下: There are n people whose IDs go from 0 to n - 1 and each person belongs exactly to one group. ...
- flask框架(十二):上下文管理***
情况一:单进程单线程 基于全局变量实现. 情况二:单进程多线程 基于threading.local对象. threading.local对象,用于为每个线程开辟一块空间来保存它独有的值. # -*- ...
- nu.random.seed()如何理解
结论: np.random.seed(a) # 按照规定的顺序生成随机数 # 参数a指定了随机数生成的起始位置: # 如果两处都采用了np.random.seed(a),且两处的参数a相同,则生成的随 ...
- 使用Hexo和Github搭建博客站
本人电脑系统为window 10专业工作站版,64位 相关步骤: 1.安装Node.js和配置好Node.js环境,打开cmd命令行,成功界面如下 2.安装Git和配置好Git环境,安装成功的象征就是 ...