3 Lawliet丶

尚未进行身份认证

学无止境,码无尽头

等级
TA的排名 1w+

React 阻止事件冒泡失效、stopPropagation和stopImmediatePropagation分析,解决stopPropagation没有阻止冒泡问题

前言做项目过程中,发现了一个问题,onClik阻止冒泡事件并没有生效,仅仅只是阻止outClick,我的需求是只触发"innerdomclick",(PS:不想知道过程的可以直接跳过看最后的结论)下面代码的输出是(代码链接:https://codepen.io/Lik_Lit/pen/OJLROMW)“rootclick”“innerdomclick”“documentc...

2019-08-20 14:45:05

IE中输入框绑定input事件触发解析(input事件初始化自动执行问题解决)

在React项目中碰到了个问题,输入框绑定了input事件,在IE中初始化会自动执行,刚开始以为是只要有placeholder就会导致问题,后面网上搜了一轮,自己手撸了一下,总结了导致绑定的input事件自动执行的原因1.输入框的值为空,2.placeholder改变(注意这个改变的就算前后的placeholder值一样也算改变;还有就是input获得焦点时和失去焦点时,也会改变;但是改变前后...

2019-08-02 08:58:12

CSS3 transform对普通元素z-index、positon和overflow的影响,

transform对普通元素的影响是个巨坑,自己亲身体验的总共有三点提升元素的垂直地位,也就是z-index会变大改变元素的定位属性,fixed变成absolute,absolute变成relative使绝对定位(absolute)的子元素受父元素overflow:hidden的作用。(ps:绝对定位(absolute)的子元素宽度大于父元素,如果父容器的定位是static,也就是默认时...

2019-07-19 15:16:14

手撸两端固定,中间随内容自动撑高的H5代码,达到一定高度中间内容出现滚动条

工作上遇到的,感觉比较实用,记录一下没超过最大高度不会有滚动条内容超过出现滚动条 /*css代码*/ .box{display:flex;flex-direction:column;width:400px;min-height:30vh;/*保证最小高度*/max-he...

2019-07-09 17:31:06

适用于前端JS中文排序的方法(localeCompare)

localeCompare方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。referenceStr.localeCompare(compareString[,locales[,options]])compareString表示用来比较的字符串因为后一个参数浏览器支持不是很友好,就不多做介绍,感兴趣可以到MDN上看。一般的用法就是a.localeC...

2019-06-25 14:17:51

JS拖拽时禁止点击事件的三种方法

做项目的时候碰到一个问题,表格列头点击排序,但是拖动列排序的时候也会触发表头的单击事件,找了一圈,大致都是两种思路,但是原理都一样。就是js点击事件和拖拽事件都会执行mousedown(鼠标按下)和mouseup(鼠标释放)两个事件,拖拽多了个mousemove那么就衍生了两种方法mousedown记住鼠标按下的时间戳,然后在mouseup用鼠标释放的时间戳与之比较,少于150毫秒就触发...

2019-04-25 15:26:17

父元素设置overflow、borde-radius、position和z-index情况下,子元素我设置position:fixed,z-index大于父元素依然被挡住

在项目中遇到一个奇怪的问题,当父元素样式overflow有滚动条、borde-radius存在、position不为static时,和z-index不为auto时,子元素的position就算是fixed,且z-index大于父元素,也会被隐藏掉。源码和效果图如下:直接体验请点击:链接源码:源码 <style>#father{width:200px;...

2019-04-13 17:29:41

鼠标悬停改变滚动条样式(高度、宽度、颜色)

接到UE需求,需要对界面滚动条进行修改,主要是鼠标悬停改变颜色和大小,心里想着是比较简单的(万恶的IE肯定不在考虑范围内),谁知道愣是搞了半天才完成ORZ,直接上源码和实现图吧。css代码::-webkit-scrollbar{height:9px!important;width:9px!important;...

2019-03-07 19:06:37

html表格table设置 border-collapse: collapse后,表格宽度大于父容器宽度的处理

先上结论:1.table-layout:fixed2.在表格的第一行设置一个隐藏的设置的宽度是650,浏览器显示却是653,你需要在表格table标签设置一个属性table-layout:fixed,接着你会发现第一行单元格合并,后面tr中的td无论如何设置宽度都没有任何效果,所以你还需要在表格的第一行设置一个隐藏的行。...

2019-03-07 15:25:31

React16版本Hook钩子函数的简单理解

自己也在学习中,百度到的文章都是翻译API的,记录一下自己的理解吧,本身是小白,有错误请指出。目前在学习当中,发现React的偏向于将逻辑从组件中抽出,使组件仅仅用于接收数据渲染,而逻辑全放入Hook中操作。useState用于返回组件的初始化state并且返回更新方法,它只关心你传入的初始值,可以包装一下更便于抽出逻辑,组件只用于渲染。useState返回的第一个参数就是你initialS...

2019-03-03 20:04:36

js禁止右键

禁止右键菜单一搜就有了,下面代码是禁止右键事件,可以根据event的which或者bottun进行判断禁止$('#11').mousedown(function(e){if(3==e.which){//ore.bottun===2console.log('这是右键单击事件');}elseif(2==e.which){//ore.bottun...

2018-12-04 09:03:50

从零开始,使用Webpack4配置属于自己的React项目及源码(实现count小例子)

前言:使用react16.8+webpack4配置的项目,项目已经完成es6编译配置,安装命令用红体字标出1.项目目录结构说明及源码下载源码地址:https://download.csdn.net/download/dknightl/11074578下载完成后解压后还要解压node_module.zip压缩包,解压完node_module压缩包,命令行进入,输入npmrundev即...

2018-11-10 18:21:50

flex布局下文字超出省略号代替不起作用解决方法

项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow:ellipsis属性无效,结论是设置文字超出省略号的元素,display属性不能为flex!!!display属性不能为flex!!!display属性不能为flex!!!设置成block或者inline都可以。下面是模拟的demo:.text-hide{border:1pxsolid...

2018-10-08 10:38:20

win10应用商店无法下载应用,或者下载完无法安装(错误代码:0x80073D0A)

吐槽一下,现在win10不开这两个东西不让你在应用下载东西也是服气的1.打开windowsupdate服务(打开任务管理器——服务——打开服务——找到该服务打开),这就可以下载了,但是不能安装。2.打开windows防火墙(打开控制面板——搜索防火墙——启动或者关闭防火墙)这样才能安装。...

2018-10-03 17:35:45

js使用indexOf和lastIndexOf判断数组是否有重复值的简单方法

回顾js基础时发现了indexOf和lastIndexOf的概念,想到了这种方式。indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置,是正向查询。lastIndexOf()方法可返回一个指定的字符串值最后出现的位置,是逆向查询。基本思路:indexOf()和lastIndexOf()所返回的index不一致则说明有重复值,如下:varary=[1,2,...

2018-08-03 15:38:58

Chrome禁用浏览器的密码框自动保存密码提示输入('autocomplete="off"'在Chrome中不起作用解决方案)

最近在做项目的时候,要求项目的密码框不显示所记住密码的提示框(就是密码输入框点击不显示该网站所保存的密码列表),然后试了很多方法。autocomplete="off"无效,onfocus="this.type='password'"无效等等。然后发现了chrome自动保存密码提示的规则:1.input的id,2.input的name。方法1去掉input的id和name属性,然后给in...

2018-07-31 10:17:02

使用原生js实现reduce

mark一下 //vararr=['a','b','c'];//vararr=[1,2,3];//vararr='abc';varsum=function(a,b){console.log(a,b)returna+b;}/****@param{数组}arr*@param{操作函数}f*@param{初始值}...

2018-07-28 11:32:57

webpack3解决font awesome找不到字体(webpack引入font awesome)

  看了N个网页都没解决,最后吧fileloader的useRelativePath设置为true解决了。看了一下,该属性是生成一个相对url,难道之前打包的时候引入的都是绝对URL?这点求大佬指点。下面是引入fontawesome的步骤。1.下载fontawesome  这是废话。我用的是CSS2.引入fontawesomeimport'../../font-awesome...

2018-05-10 16:04:40

SSM框架中SpringMvc配置jsp、html两个视图解析器

今天弄毕设时因为前后端分离,前端React生成的是html文件,而后端是Jsp页面,需要SpringMvc配置jsp、html两个视图解析器,核心思想是继承SpringMvc给的父类,自己写一个解析类,方法如下:第一步:继承InternalResourceView,写解析类packagecom.ssm.hui.util;//这是你的包名跟importjava.io.File;impo...

2018-05-09 17:39:15

webpack-dev-server 解决跨域问题

  在毕设开发时,由于用react开发前端,SSM开发后端,在二者需要数据交互的时候,发现二者的端口不一样,会出现喜闻乐见跨域问题,由于react用了devServer(webpack-dev-server),所以可以使用devServerd的proxy解决。  比如我前端的路径为http://localhost:8888,而后端启动的服务为http://localhost:8080,正...

2018-04-29 14:17:17

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。