为什么我的阻止不了冒泡？
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrap" class="wrap"> <div class="title">自定义select</div> <div class="custom"> <div id="demo" class="demo"> <div class="select"> <div class="input">未选择</div> <div class="inco"> <div class="triangle"></div> </div> </div> <ul id="hide" class="hide"> <li><input class="search" type="text" placeholder=" 搜索"></li> <li class="topic">构建工具</li> <li> <ul class="tool"> <li>Babel</li> <li>Webpack</li> <li>Rollup</li> </ul> </li> <li class="topic">前端框架</li> <li> <ul class="frame"> <li>Vue</li> <li>Angular</li> <li>React</li> <li>Nerv</li> </ul> </li> </ul> </div> </div> <div> <p id="out"></p> </div> <div style="text-align: center;margin-top: 60px;"> <div class="title">原生select</div> <select id="protogenesis"> <option value="1" type="构建工具">Babel</option> <option value="2" type="构建工具">Webpack</option> <option value="3" type="构建工具">Rollup</option> <option value="4" type="前端框架">Vue</option> <option value="5" type="前端框架">Angular</option> <option value="6" type="前端框架">React</option> <option value="7" type="前端框架">Nerv</option> </select> </div> </div> </body> <script type="text/javascript" src="js/script.js"></script> </html>
css:
* {
padding: 0;
margin: 0;
font-family: Microsoft YaHei;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
body{
background-color:#eee;
width:100%;
height:100vh;
}
.wrap{
width:400px;
margin:0px auto;
padding-top:100px;
}
.title{
font-size:25px;
color:#4C97F4;
line-height:50px;
text-align:center;
}
.wrap .custom{
width:400px;
margin:0 auto;
font-size:20px;
border:1px solid #4C97F4;
background-color:white;
}
.wrap .custom .demo .select{
width:400px;
height:40px;
cursor:pointer;
}
.wrap .custom .demo .select .input,
.wrap .custom .demo .select .inco{
float: left;
}
.wrap .custom .demo .select .input{
width:345px;
height:40px;
line-height:40px;
background-color:white;
padding-left:5px;
}
.wrap .custom .demo .select .inco{
width:50px;
height:40px;
background-color:#4C97F4;
position:relative;
}
.wrap .custom .demo .select .inco .triangle{
width:0;
height:0;
border:10px solid white;;
border-bottom:none;
border-left-color:transparent;
border-right-color:transparent;
border-left-width:5px;
border-right-width:5px;
position:absolute;
top:15px;
left:20px;
}
.wrap .custom .demo .hide{
display:none;
overflow-y:scroll;
box-sizing: border-box;
width:400px;
height:360px;
-ms-overflow-style: none;/* 兼容IE/Edge */
border-bottom:10px solid #fff;
border-top:1px solid #4C97F4;
transition: all .3s;
}
/* 兼容chorme */
.wrap .custom .demo .hide::-webkit-scrollbar {
display: none;
}
.wrap .custom .demo .hide .search{
width:96.5%;
height:40px;
box-sizing: border;
margin:5px;
}
.wrap .custom .demo .hide .search::-webkit-input-placeholder{
width:95%;
height:40px;
font-size:20px;
box-sizing: border;
margin:5px;
}
.wrap .custom .demo .hide .topic{
height:50px;
line-height:50px;
font-weight:bold;
font-size:22px;
padding-left:5px;
}
.wrap .custom .demo .hide .tool,
.wrap .custom .demo .hide .frame{
/* height:50px; */
font-size:20px;
box-sizing: border-box;
}
.wrap .custom .demo .hide .tool li,
.wrap .custom .demo .hide .frame li{
padding-left:20px;
line-height:50px;
cursor:pointer;
}
.wrap .custom .demo .hide .tool li:hover,
.wrap .custom .demo .hide .frame li:hover{
background-color:#ccc;
}
#out{
text-align: center;
margin-top:50px;
margin-bottom:50px;
}js:
(function (window, document) {
// 公共方法
const methods = {
$(selector, root = document) {
return root.querySelector(selector);
},
$$(selector, root = document) {
return root.querySelectorAll(selector);
}
}
// 存放数据
let data = {
tool: [],
frame: []
// tool: ["Babel", "Webpack", "Rollup"],
// frame: ["Vue", "Angular", "React", "Nerv"]
}
let outTxt = "未选择";
// 构造函数
let search = function (data) {
}
search.prototype._protogenesis = (ele, vData) => {
methods.$$(ele).forEach((element) => {
vData.push(element.innerText);
})
};
search.prototype._protogenesis("#protogenesis option[type='构建工具']", data.tool);
search.prototype._protogenesis("#protogenesis option[type='前端框架']", data.frame);
// 创建Li节点
search.prototype._chlid = (obj, li, vData) => {
obj.forEach((element, index) => {
if (element.includes(vData)) {
li.push(`<li>${obj[index]}</li>`);
}
});
return li;
}
// 搜索框，通过输入的内容对分类进行筛选放进数组，调用创建节点函数
search.prototype._monitoring = (vData) => {
let toolLi = [], frameLi = [];
toolLi = search.prototype._chlid(data.tool, toolLi, vData);
frameLi = search.prototype._chlid(data.frame, frameLi, vData);
methods.$('.tool').innerHTML = toolLi.join('');
methods.$('.frame').innerHTML = frameLi.join('');
}
// 隐藏方法
search.prototype._hidden = (el) => {
el.style.height = '0';
setTimeout(() => {
el.style.display = "none";
}, 300);
}
// 显示方法
search.prototype._show = (el) => {
el.style.height = '360px';
setTimeout(() => {
el.style.display = "block";
},100);
}
let hid = methods.$(".hide");
// 点击选择选项，颜色变化，以及列表下面显示，之前的值以及改变后的值
search.prototype._assignment = (outTxt, _this) => {
let txt = _this.innerText;
_this.style.backgroundColor = "#4C97F4";
_this.style.color = "white";
search.prototype._hidden(hid)
methods.$(".input").innerText = txt;
methods.$("#out").innerHTML = `之前的值是 ${outTxt}<br/>改变后的值是 ${txt}`;
return txt;
}
// 轮遍初始化列表样式
search.prototype._bgcolor = (element) => {
element.forEach((ele, index) => {
ele.style.backgroundColor = "#ffffff";
ele.style.color = "black";
})
}
// 点击的时候可以切换下拉列表的显示
hid.style.display = "none";
methods.$(".select").addEventListener("click", ()=> {
if (hid.style.display == "none") {
search.prototype._show(hid);
} else if (hid.style.display == "block") {
search.prototype._hidden(hid);
}
},true);
// 绑定监听搜索输入框事件(下面的用function而不用=>，是因为保留监听时的this)
// 绑定监听搜索框输入事件调用生成节点方法
methods.$(".search").addEventListener('input', function () { search.prototype._monitoring(this.value) },true);
// 绑定点击事件调用选样式项变化方法和列表下面内容变化方法
let hideLi = methods.$$("#hide ul li");
hideLi.forEach((element, index) => {
element.addEventListener('click', function () {
search.prototype._bgcolor(hideLi);
outTxt = search.prototype._assignment(outTxt, this);
},true);
});
// 在下拉列表展开时，点击非下拉框的部分可以收起下拉列表
methods.$("body").addEventListener('click',()=>{
search.prototype._hidden(hid);
},true);
})(window, document);点击下拉框显示时，冒泡触发了body事件
1
收起
正在回答
3回答
你好，与动态和静态没有关系，还是权重的问题，行内样式大于css样式表中的，如果想要背景颜色生效，可以添加!important增加权重，如下：
可以测试下，祝学习愉快！
相似问题
为啥return false可以避免冒泡？
8
0
4
阻止气泡弹出
77
0
3
return false
13
0
6
老师为什么要停止冒泡啊？
3
0
3
这里return false可以结束事件不是很理解
29
0
6
登录后可查看更多问答，登录/注册
热门框架Vue开发WebApp 18版
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星