做前端最难受的就是产品给的需求以及测试给的bug了,看待这个标题是不是有点蒙,这是什么需求,下面来解读下!
需求:如下图,点击已保存按钮弹出已保存列表,当点击屏幕其他区域要关闭这个下拉框,是不是很简单
加点东西,但是点击这个下拉框内部的区域不能关闭下拉框)(原谅我里面没写东西你就当有东西,给个机会噻!),是不是很常见,是不是很恶心!你们是怎么做的。 之前我见过有人把事件挂在window上,然后把不想要操作dom都挂上class,然后在点击事件里面一一排除括弧笑,或者有人投机取巧在一部分dom上挂了事件,结果又是测试不是每次都能关闭,全看运气!
接天就来说下我的解决办法,因为我是写的react,我就直接上react代码了,逻辑都是一样,无妨!
首先在componentDidMount中写下我们函数的触发:
window.addEventListener('click', (event) => {
event = event || window.event;
this.setState({
savedListShow: false, // 这个是控制列表显隐的状态
});
})
事件挂在window上怎么避免点击列表内部的dom不会触发呢,不要说什么阻止冒泡,不好使的,首先我们在事件中输出我们event,
看看到底是什么!
这是我点击列表内部输出的event。
说是路径,其实在深一步输出出来的是js对象,既然是js对象那我们就能拿到对象上的calss属性了,对于我们的判断也就不成问题了。
去代码中到找我们不想要触发的那个(或者是一堆)不想触发的dom的最大父级,
对的我这里是class为SavedList的div,在最前边(记住是最前边)加上一个class _&saveBtn(别人不用的,免得冲突)。
在细看下上边我点击输出的event中的path, 每一个元素.后的就是class, 注意横线处的class,这说明我点击的事件源是我不希望触发的区域,然后我们回到最开始componentDidMount中的事件函数。
componentDidMount() {
// 点击其他区域关闭已保存条件弹窗
window.addEventListener('click', (event) => {
event = event || window.event;
let isSaveStructure = event.path.some(item => {
这里使用了startsWith,相对来说比较严谨,这要是为什么强调要在最前边添加的原因了
if (item.className && item.className.startsWith('_&saveBtn')) {
return true;
}
});
if (!isSaveStructure) {
this.setState({
savedListShow: false
});
}
})
}
这样依赖我们不想触发的dom以及dom内部的元素,遇到这个点击事件就会呗排除在外了,是不是很省心。
原文:https://segmentfault.com/a/1190000021020795
如果想要建立企业的网站,但还没有决定选择哪个平台?为小型企业需求选择合适的网站设计平台并非易事,而且尤其是如此多的建站平台就更难抉择了,企业创建网站的初衷是吸引世界各地数百万的关注和打响企业品牌
网站线框是网站建设过程中的关键组成部分,必须确定将在页面上显示哪些信息,以及如何流动,网站建立了基本消息流,就可以添加一些细节了,需要定义布局和间距,可用性约定和信息层次结构。消息需要使用字体大小,什么类型的图像
相信大家在平时的需求当中,都会遇到一些动画需求,那么大家又是如何抉择实现方式呢?这里我大概分为4种情况,gif图/animation/ae导出骨骼动画/ae导出canvas
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!