Javascript实现单选框效果


Posted in Javascript onDecember 09, 2020

本文实例为大家分享了Javascript实现单选框效果的具体代码,供大家参考,具体内容如下

描述: 点击每一个li 将li的内容赋值给 div 给当前点击的li加上背景色, 点击空白部分隐藏

Javascript实现单选框效果

技术要点:

1.事件委托

事件委托: 事件代理, 将子节点要做的事情交给父元素来做

原理: 将原来要给子元素添加的事件, 加给父元素, 事件中通过 target || srcElement 找到对应的子节点, 子节点处理具体的操作

优点: 避免使用for 后续加进来的元素也有同样的事件处理

使用: 如果子节点有统一的事件(每一个li都加点击事件 每一个li都输出元素)

ul.onclick = function(evs){
 var ev = window.event || evs;
 // console.log(ev.target || ev.srcElement);
 var tar = ev.target || ev.srcElement;
 tar.style.background = 'red';
}

// 创建节点
var li = document.createElement('li');
li.innerHTML = '12345';
// 追加进去
ul.appendChild(li);

2.阻止冒泡

由于冒泡产生的问题 阻止冒泡解决

依赖于事件对象

标准: ev.stopPropagation();

​ ie: ev.cancelBubble = true;

一个是方法 一个是属性 需要做兼容

判断方法是否存在:

ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

不想让哪一个事件冒泡,就在那一个元素的事件上阻止

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>模拟单选框</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  div{
   width: 260px;
   height: 30px;
   border: 1px solid #0000ff;
   margin: 40px auto;
   font: 14px/30px "微软雅黑";
   text-indent: 5px;
  }
  ul{
   width: 260px;
   height: 150px;
   border: 1px solid #0000ff;
   margin: -40px auto;
   display: none;
  }
  ul > li{
   list-style: none;
   width: 100%;
   height: 30px;
   font: 14px/30px "微软雅黑";
   text-indent: 5px;
  }
  ul > li:hover{
   color:#fff5bd;
   background: #fe6601;
  }
 </style>
</head>
<body>
 <!-- 1.布局: div 和 列表 并且划上加背景色 -->
 <div id="content"></div>
 <ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>HTML5</li>
  <li>CSS3</li>
 </ul>
 <script>
  // 点击每一个li 将li的内容赋值给 div 给当前点击的li加上背景色
  // 点击空白部分隐藏
  // 1.当鼠标移入div时, ul显示, 反之ul隐藏
  // 获取div, ul
  var div = document.querySelector('div');
  var ul = document.querySelector('ul');
  var lis = ul.getElementsByTagName('li');
  console.log(div, ul, lis);
  // 鼠标移入div时, ul显示, onmouseenter不会触发父元素事件
  div.onmouseenter = function(){
   ul.style.display = 'block';
   /* 将li的内容赋值给 div 给当前点击的li加上背景色
   获取点击的li的值 */  
   // 获取ul点击事件
   ul.onclick = function(evs){
    // 增加排他操作
    for(var i = 0; i < lis.length; i++){
     lis[i].style.background = '#ffffff';
     lis[i].style.color = '#000000';
    }
    // 获取事件
    var ev = window.event || evs;
    // 阻止冒泡
    ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
    // console.log(ev.target || ev.srcElement);
    // 获取事件的触发源
    var tar = ev.target || ev.srcElement;
    // div的内容更改为相对应触发源的内容
    div.innerHTML = tar.innerHTML;
    // 给当前点击的li加上背景色
    tar.style.background = '#0000FF';
    tar.style.color = '#fff5bd';
   }
  }
  // 点击空白处隐藏
  document.onclick = function(){
   // ul消失
   ul.style.display = 'none';
   // div的值设为空
   div.innerHTML = '';
   // 所有li恢复原来样式 
   for(var i = 0; i < lis.length; i++){
    lis[i].style.background = '#ffffff';
    lis[i].style.color = '#000000';
   }
  }
  // 给每一个li添加划上属性
  for(var i = 0; i < lis.length; i++){
   // 为li添加划上事件
   lis[i].onmouseenter = function(){
    this.style.background = '#fe6601';
    this.style.color = '#fff5bd';
   }
   // 为li添加划出事件, 恢复为默认样式
   lis[i].onmouseleave = function(){
    this.style.background = '#ffffff';
    this.style.color = '#000000';
   }
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
vue debug 二种方法
Sep 16 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
javascript实现移动端轮播图
Dec 09 #Javascript
JavaScript实现弹出窗口效果
Dec 09 #Javascript
五句话帮你轻松搞定js原型链
Dec 09 #Javascript
JS常用跨域方法实现原理解析
Dec 09 #Javascript
video.js添加自定义组件的方法
Dec 09 #Javascript
手把手教你如何编译打包video.js
Dec 09 #Javascript
ES6 十大特性简介
Dec 09 #Javascript
You might like
PHP设计聊天室步步通
2006/10/09 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
使用Python神器对付12306变态验证码
2016/01/05 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python读写docx文件的方法
2018/05/08 Python
django实现类似触发器的功能
2019/11/15 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
pandas的resample重采样的使用
2020/04/24 Python
举例讲解Python装饰器
2020/12/24 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
网络工程师自荐书范文
2014/04/01 职场文书
高三学生评语大全
2014/04/25 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
留学推荐信中文范文
2015/03/26 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python