该demo定义了一个菜单，点击了一次之后就不能再点击，另外其中也用到了flex布局，可直接将代码复制运行即可

<html>

  <head>

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title></title>

	<meta charset="utf-8" />

	<style>

		*{

			margin:0px;

			padding:0px;

		}

		li{

			list-style:none;

		}

		.menu{

			display:flex;

				flex-flow: row nowrap;

				width:800px;

				height:30px;

				background:gray;

				margin:20px;

		}

		.menu li{

			width:20%;

			height:100%;

			margin-left:5px;

			background:green;

			text-align:center;

			color:#fff;

			line-height:30px;

			cursor:pointer;

			-moz-user-select:none;

		}

		.menu li:nth-child(1){

			margin:0px;

		}

		.menu li:hover{

				color:#fff;

				background:#f00;

		}

		.pointer{

			pointer-events:none;

		}

	</style>

  </head>

  <body>

	<ul class="menu">

		<li>首页</li>

		<li>产品中心</li>

		<li>新闻中心</li>

		<li>公司简介</li>

		<li>联系我们</li>

	</ul>

	<div id="divContent"></div>

	<script>

	var divContent=document.getElementById("divContent");

		document.getElementsByTagName("ul")[0].addEventListener("click",function(e){

			var currentObj=e.target;

			if(currentObj.tagName.toLowerCase()=="li"){

				var childList=document.getElementsByTagName("ul")[0].childNodes;

				for(var i=0;i<childList.length;i++){

					childList[i].className="";

				}

				currentObj.className=" pointer";

				divContent.innerHTML=currentObj.innerHTML;

				console.log(divContent.innerHTML);

			}

		})

	</script>

  </body>

</html>

　　

css3-pointer-events_demo的更多相关文章

  1. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  2. 吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版

    一直自己都想给自己的博客打造一个独一无二的皮肤,但是一直没有强劲的动力去完成这件事情.后来凭借着工作上面的需求(涉及到css3),就把自己的博客当成一个最好的试验场地.从而产生了你现在所看到的这个模板 ...

  3. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  4. CSS3新特性应用之用户体验

    一.光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可. 完整代码: curosr: u ...

  5. jQuery+css3侧边栏导航菜单

    效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...

  6. 一个简单的CSS3+js 实现3D BOX

    <!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...

  7. [原创]jquery+css3打造一款ajax分页插件

    最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...

  8. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

  9. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  10. CSS3 制作一个边框向周围散开的按钮效果

    我们将要达到的是如下的效果(若效果未出现请刷新): 分析 主要还是运用CSS3的transition, animation, transform还有渐变背景等特性. 由于按钮在鼠标进入时有不同的样式, ...

随机推荐

  1. java实现 猜数字游戏

    猜数字游戏 猜数字 很多人都玩过这个游戏:甲在心中想好一个数字,乙来猜.每猜一个数字,甲必须告诉他是猜大了,猜小了,还是刚好猜中了.下列的代码模拟了这个过程.其中用户充当甲的角色,计算机充当乙的角色. ...

  2. Java实现 蓝桥杯 历届试题 剪格子

    问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+ |10* 1|52| +--****--+ |20|30* 1| *******--+ | 1| 2| 3| +--+ ...

  3. [51nod1577]异或凑数

    题目   点这里看题目. 分析   以下设\(k=\lfloor\log_2(\max a)\rfloor\).   关于异或凑数的问题自然可以用线性基处理,即如果可以插入到线性基,就说明无法凑出这个 ...

  4. SQL2008R2安装碰到问题的解决方法（iso文件用对应的工具）

    SQL2008R2安装碰到问题的解决方法     安装谁不会啊,这么简单,是啊,可是匹配包时就不是那么顺利啊.就像以前的Ruby还专挑匹配版本的包一样,不像现在的Py自动为我们找,这是Mar 7贴在Q ...

  5. C#数据结构与算法系列（六）：链表——双链表（Double-LinkedList）

    1.对比单向链表 单向链表查找的方向只能是一个方向,而双向链表可以向前或者向后查找 单向链表不能自我删除,需要靠辅助节点,而双向链表可以自我删除 对于单向链表的删除,我们首先要找到单向链表待删除节点的 ...

  6. Python进阶——详解元类，metaclass的原理和用法

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题第18篇文章,我们来继续聊聊Python当中的元类. 在上上篇文章当中我们介绍了type元类的用法,在上一篇文章当中我 ...

  7. Scanner扫描器的使用

    Scanner:扫描器,可以通过Scanner类扫描用户在控制台录入的数据. 1.导包 //导包快捷键Alt+Enter 2.创建键盘录入对象 //键盘录入对象的名称为 “sc” 3.接收数据 //将 ...

  8. vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。

    麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可 ...

  9. Selenium自动化测试与练习

    Selenium WebDriver 提供了web自动化各种语言(java python ruby等等) 调用接口库 提供 各种浏览器的驱动(web driver) 来驱动浏览器的 特点 测试程度可以 ...

  10. <用户输入url按下回车，一直到用户看到界面，这期间经历了什么>

    用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一.  DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...