NEW

js阻止子元素响应父元素事件(事件冒泡)

js阻止子元素响应父元素事件(事件冒泡)
今天同事遇到这样一个问题,找我解决。 他希望点击整个DIV都可以响应点击事件,但是有些交互元素需要排除掉。如:点击链接页面跳转、点击按钮响应事件等)。 这是一个关于事件冒泡的问题,那便从事件冒泡写起。 事件冒泡 在一个元素上触发事件,如果此元素定义了处理程序,那么此次事件就会被捕获,根据程序进行该事件的处理。否则这个事件会根据DOM树向父节点逐级传播,如果从始至终都没有被处理...
NEW

如何通过js获取隐藏元素的高度

如何通过js获取隐藏元素的高度
当一个元素的样式被设置了display: none时,它的高度相关属性值为 0。 这是因为修改display属性会触发元素的重排和重绘,而元素重排时将会重新计算它的一些属性值。被设置display: none的元素不占用文档空间,自然计算到的高度值为 0。 隐藏元素的方式 “隐藏”元素的方式有多种,除了设置display: none以外,还有visibility: hidden、opacity: 0、height: 0; overflow: hidden、transform...
NEW

Webpack按需打包Lodash的几种方式

Webpack按需打包Lodash的几种方式
在数据操作时,Lodash 就是我的弹药库,不管遇到多复杂的数据结构都能用一些函数轻松拆解。 ES6 中也新增了诸多新的对象函数,一些简单的项目中 ES6 就足够使用了,但还是会有例外的情况引用了少数的 Lodash 函数。一个完整的 Lodash 库,即使是压缩后,现最新版本也有 71k 的体积。不能为了吃一口饭而买下一个饭店啊。 针对这个问题,其实已经有很多可选方案了。 函数模块 Lo...
NEW

React中的事件处理

React中的事件处理
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同: React事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) React 中稍稍有点不同: <button onclick="{activateLasers}">   Activate Lasers ...
NEW

详细分析es6 箭头函数与常规函数的异同

详细分析es6 箭头函数与常规函数的异同
基本用法 ES6允许使用“箭头”(=>)定义函数。 var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 ...
NEW

React Refs添加一个组件的引用

React Refs添加一个组件的引用
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。 这种特性,让我想到了jquery中的$符号。虽然两者有本质的区别的,但起到的作用,好像是一样的。 使用方法 绑定一个 ref 属性到 render 的返回值上:...

React 组件生命周期

React 组件生命周期
组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框...

React创建组件的三种方式及其区别

React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下。 无状态函数式组件 创建无状态函...

reactJS快速上手,看完代码,一切了然于心

reactJS快速上手,看完代码,一切了然于心
快速搭建 macOS 或者 Linux 当中用 create-react-app 可以快速启动一个 React 页面: npm 如果失败,用下面的镜像。 npm install -g cnpm --registry=https://registry.npm.taobao.org npm install -g create-react-app create-react-app my-app cd my-app/ npm start 选择一个编辑器 在线的就用https://codepen.io/gaearon/pen/gWWZgR?...

使用localStorage缓存js和css文件

使用localStorage缓存js和css文件
/** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少http请求和页面渲染时间 * 使用方法: * 1.使用此插件前,需要给插件的pageVersion变量赋值,建议变量值由服务器后端输出,当需要更新客户端资源时,修改版本值即可。 * 2.加载Js:由于js加载有顺序要求,所以需要将后加载的脚本作为前一个脚本的回调参数传入,如: * whir.res.lo...
Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: