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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
用JavaScript显示随机图像或引用
Apr 21 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
原生js实现轮播图
Feb 27 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 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
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
浅谈python中的占位符
2017/11/09 Python
python验证码识别实例代码
2018/02/03 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
用python做游戏的细节详解
2019/06/25 Python
基于python检查矩阵计算结果
2020/05/21 Python
浅谈django channels 路由误导
2020/05/28 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
奠基仪式策划方案
2014/05/15 职场文书
旷课检讨书范文
2015/01/27 职场文书
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技