react组件直接在document上添加事件
demo:比如组件里有个div写的框框,点击document body的背景色变红,点击div写的框框没效果
componentDidMount(){
document.onclick = this.ChangeBodyBgcolor;
}
clickDiv= (e)=>{
e.nativeEvent.stopImmediatePropagation();//阻止冒泡
} ChangeBodyBgcolor= ()=>{
document.body.style.backgroundColor="red";
}
react组件直接在document上添加事件的更多相关文章
- 如何在通过knockout数据绑定的DOM元素上添加事件
通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才 ...
- 【原】React中,map出来的元素添加事件无法使用
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...
- 【学】React的学习之旅3 - 添加事件(onClick)
button除了用<input type="button">之外,还可以直接用<button></button>来创建,而2个标签的中间的内容就 ...
- 关于React中,map出来的元素添加事件问题
用es6 map 的写法 直接绑定一个onTouchStart 事件不会报错. 用es5的map写法 如果不加上this 会报这个错误 无法读取未定义的属性 解决的方法是 绑定this 就可以了
- React 为什么要把事件挂载到 document 上 & 事件机制源码分析
前言 我们都知道 React 组件绑定事件的本质是代理到 document 上,然而面试被问到,为什么要这么设计,有什么好处吗? 我知道肯定不会是因为虚拟 DOM 的原因,因为 Vue 的事件就能挂载 ...
- vue router-link 上添加点击事件
在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...
- 【jquery】 在异步加载的元素上绑定事件
最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...
- JS添加事件和解绑事件:addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
- React组件略讲
React是前端组件化开发的开山鼻祖,这种开发方式彻底解决了的前端组件复用的痛点.今天,就来研究一下React组件开发. 前端同学一般都会从Vue入门,因为Vue使用的<template> ...
随机推荐
- Mcode的介绍
开始时进行的Mcode代码积累平台的分析: 登录模块 Login.html登录页面进行用户的登录,把登录好的用户id存到session里面,转到代码模块 Register.html注册页面进行用户的注 ...
- Eclipse启动和手动启动tomcat访问localhost:8080显示404问题总结
前言:建议对tomcat的文件结构和相关属性有较多了解.本文以eclipse的DynamicWebProject为讲解对象. 目录: eclipse添加tomcat关联注意点 tomcat404问题归 ...
- 为了用python计算一个汉字的中心点,差点没绞尽脑汁活活累死
为了用python计算一个汉字的中心点,差点没绞尽脑汁活活累死
- Zookeeper在Centos7上搭建单节点应用
(默认机器上已经安装并配置好了jdk) 1.下载zookeeper并解压 $ tar -zxvf zookeeper-3.4.6.tar.gz 2.将解压后的文件夹移动到 /usr/local/ 目录 ...
- Android 开发工具类 25_getJSON
获取 JSON 数据并解析 import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; im ...
- wp 自定义分页函数
function kerui_pagination($query_string){ global $posts_per_page, $paged; $my_query = new WP_Query($ ...
- .bat学习-基础语法(常用)
一般来说,脚本或者语言都有相同地方 定义变量,输入,输出,判断条件等等.知道的相同之处,我们就可以借助强大的搜索引擎进行查找我们想要知道的东西. bat为批处理脚本BATCH.现在只知道是使用于win ...
- PyCharm2018专业版激活步骤
激活步骤: 1.更改hosts文件,2 获取注册码, 3 完成注册. 1. 更改host文件 hosts文件的路径 : c:\windows\system32\drivers\etc\hosts 将 ...
- Java List 生成 树
package com.victop.ibs; import java.util.ArrayList; import java.util.List; import org.apache.commons ...
- PL/SOL csv格式导出查询结果时出现某些列的数据被四舍五入了的解决办法
昨天用pl/sql从oracle数据库捞取数据时,发现导出的csv格式中某些列的数据被进行了四舍五入处理了,当然这些列都是纯数字的,百思不得其解,后来上网才,才得知了原因. 这并不是导出的CSV文件数 ...