事件冒泡 --- 仿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 ...
随机推荐
- 性能篇——函数调用结果的 LRU 缓存
1. 应用场景: 多次调用同一函数 2. 普通写法: def say(name): print("hellow:%s"%name) now = datetime.datetime. ...
- R树--理解平面思维
R树数据结构 备注:参考wiki的内容. 简介 Guttman, A.; “R-trees: a dynamic index structure for spatial searching,” ACM ...
- SSH服务端
- 【模板】多标记 LCT
代码如下 #include <bits/stdc++.h> using namespace std; typedef long long LL; const int mod = 51061 ...
- NTP服务及时间同步
环境: centos7 server 192.168.2.171 client 192.168.2.173.192.168.2.174 整体思路:173.174同步171的时间,171定时同 ...
- MySQL数据库MyISAM存储引擎转为Innodb
MySQL数据库MyISAM存储引擎转为Innodb 之前公司的数据库存储引擎全部为MyISAM,数据量和访问量都不是很大,所以一直都没什么问题.但是最近出现了MySQL数据表经常被锁的情况,直接导 ...
- BZOJ 2152 / Luogu P2634 [国家集训队]聪聪可可 (点分治/树形DP)
题意 一棵树,给定边权,求满足两点之间的路径上权值和为3的倍数的点对数量. 分析 点分治板题,对每个重心求子树下面的到根的距离模3分别为0,1,2的点的个数就行了. O(3nlogn)O(3nlogn ...
- robotframework 获取坐标
Get Horizontal Position 获取X轴坐标 Get Vertical Position 获取Y轴坐标 Get Element Size 获取整个图表的高 ...
- javaScript第二篇
事件处理函数 javaScript响应用户操作等都是通过事件处理来触发;其基本形式为 event = "javaScript statement(s);" 事件 = "事 ...
- typescript 创建二维数组
private mouseView: Mouse private mouseArray: Array<Array<any>> = new Array<Array<a ...