h5学习笔记：菜单分割线和父节点监听点击

最新推荐文章于 2021-06-16 10:20:54 发布

hero82748274

最新推荐文章于 2021-06-16 10:20:54 发布

阅读量326

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/113747485

版权

javascript和Egret相关专栏收录该内容

96 篇文章 3 订阅

订阅专栏

2020这样就过去了。疯狂加班一个月总算结束了，难得休息开始玩起了cocos 和一些vuejs 之前未试过的玩法。休息时间写写博客也是最写意也。前段时间看了一个菜单分割线做法，看了这个写法上的差别。下面也来做一下实验。

在这里插入图片描述
我们经常遇到菜单加分割线做法。中间2个线是通过border-right实现，只是这个做法会出现最后一个菜单尾部的问题，影响美观。一般情况下需要使用last-child 去修正。

我们实验一下另外做法，采取not选择器。这个写法又一些差别，这个我在一些公众号看过一些文章。我们通过一个简单案例来实现一下。以下的代码是一个普通移动菜单。采取flex 进行布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>菜单测试</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
	</head>
	<style type="text/css">
		.menus{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
			
		.menu-item{
			width: 33.333%;	
			text-align: center;
			cursor: pointer;
		}
		
	    .menu-item:not(:last-child){
	    	border-right: 1px solid #ccc;
	    }
		
	</style>
	<body>
		<div id="menus" class="menus">
			<div class="menu-item">菜单一</div>
			<div class="menu-item">菜单二</div>
			<div class="menu-item">菜单三</div>
		</div>	
	</body>
</html>

第一种写法是采取not选择器，它告诉我们不要选择最后一个。这样子，菜单采取了border-right 写法后，最后一个border-right就不会显示出来。

.menu-item:not(:last-child){
    border-right: 1px solid #ccc;
}

再看看另外一种传统的做法。例如这样。先实现子节点全部border-right 出处理，然后再处理最后一个

		.menu-item{
			width: 33.333%;	
			text-align: center;
			cursor: pointer;
			border-right: 1px solid #ccc;
		}
		
	    /*.menu-item:not(:last-child){
	    	border-right: 1px solid #ccc;
	    }*/
		
	   .menu-item:last-child{
	    	border-right: none;
	    }

对比两种写法，not的语法更像是另外一种思维，告诉浏览器不要包含最后一个。两者都可以实现菜单最后一个border 消失的效果。实现了菜单分割线效果。但看着not 写法更高级一点。

2 .采取父节点去监听点击

在动态渲染子节点的时候，有时候遇到了不方便添加监听方法时候。有一种思路可以简单实现。那就是先从父节点入手，采取事件event.target的方式去监听点击对象是谁，从而实现监听子节点的目的。例如监听图片点击放大，也可以采取这种方式实现。只要判断到是图片就可以处理对应交互效果了。

	<body>
		<div id="menus" class="menus">
			<div class="menu-item">菜单一</div>
			<div class="menu-item">菜单二</div>
			<div class="menu-item">菜单三</div>
		</div>	
		<script type="text/javascript">
			var menu = document.getElementById('menus');
			menu.addEventListener('click',function(e){
				console.log(e.target.className)
				if(e.target.className == 'menu-item'){
				 	alert('点击了菜单' + e.target.innerText)
				}
			})
		</script>
	</body>

总体来讲，css和js都在逐年进步和变化，还有很多新特性在逐年排队实现。过去一些比较老做法已经不推荐。前端还真是一个苦逼的行业，大前端流行趋势，这个大前端也具备不少知识和优化技巧学习。好了，今天就记录一些最近学习到技巧。

hero82748274

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记：菜单分割线和父节点监听点击

2020这样就过去了。疯狂加班一个月总算结束了，难得休息开始玩起了cocos 和一些vuejs 之前未试过的玩法。休息时间写写博客也是最写意也。前段时间看了一个菜单分割线做法，看了这个写法上的差别。下面也来做一下实验。我们经常遇到菜单加分割线做法。中间2个线是通过border-right实现，只是这个做法会出现最后一个菜单尾部的问题，影响美观。一般情况下需要使用last-child 去修正。我们实验一下另外做法，采取not选择器。这个写法又一些差别，这个我在一些公众号看过一些文章。我们通过一个简单案例
复制链接

扫一扫