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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
详解Python 函数如何重载?
2019/04/23 Python
python设置环境变量的作用整理
2020/02/17 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
python打包生成so文件的实现
2020/10/30 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
乒乓球比赛通知
2015/04/27 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
python删除csv文件的行列
2021/04/06 Python