react判断点击位置是否为组件内,实现点击外部触发组件内事件
1.导入
2.绑定ref
<div ref="refTest"
</div>
//监听外部click
componentDidMount() {
document.addEventListener('mousedown', (e)=>this.handleClickOutside(e), false);
}
componentWillUnmount() {
document.removeEventListener('mousedown', (e)=>this.handleClickOutside(e), false);
}
handleClickOutside(e) {
const target = e.target;
console.log(target);
console.log(this);
// 组件已挂载且事件触发对象不在div内
let result=findDOMNode(this.refs.refTest).contains(e.target);
if( !result) {
console.log("ssscs");
this.setState({
ulShow:false
});
}
}
强制重新渲染
react判断点击位置是否为组件内,实现点击外部触发组件内事件的更多相关文章
- jqgrid 点击列头的超链接或按钮时,不触发列排序事件
接上篇文章:jqgrid 将列头设置为超链接或按钮 如果在列头设置了超链接或按钮,在点击超链接或按钮时会触发列的排序事件. 原由:点击超链接/按钮会触发排序的冒泡事件 解决方法:点击超链接/按钮时,阻 ...
- IOS ScrollView放大缩小点击位置并居中
项目中的一个优化案例,提升用户体验,对地铁线路图点击放大.缩小,并且点击位置居中: 正常ScrollView 我们点击某一点比如屏幕右侧,想要点的位置向左移动到中心位置,很简单只有算出该点位置距中心位 ...
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置
<script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...
- win10 uwp 右击浮出窗在点击位置
本文主要让MenuFlyout出现在我们右击位置. 我们一般使用的MenuFlyout写在前台,写在Button里面,但是可能我们的MenuFlyout显示的位置和我们想要的不一样. 通过使用后台写S ...
- u3d 鼠标点击位置,物体移动过去。 U3d mouse clicks position, objects move past.
u3d 鼠标点击位置,物体移动过去. U3d mouse clicks position, objects move past. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱: ...
- unity3d 让物体移动到点击位置
using UnityEngine; using System.Collections; public class test : MonoBehaviour { //在场景中鼠标点击地面后,角色可以移 ...
- vue组件通信,点击传值,动态传值(父传子,子传父)
转载:https://blog.csdn.net/xr510002594/article/details/83304141 一.父组件传子组件,核心--props 在这里触发 handleClick ...
- 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 获取iframe子页面内容高度给iframe动态设置高度
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
- 逆向破解H.Koenig 遥控器 Part 2
逆向破解H.Koenig 遥控器 Part 2 到目前为止,我们已经知道了RF收发器的安装过程,下面是我们所掌握的东西 : l 无线电收发器是一个Avantcom A7105 l 调制是FSK l 频 ...
- (六)buildroot使用详解
为什么要使用buildroot? (文件系统搭建,强烈建议直接用buildroot,官网[http://buildroot.uclibc.org/]上有使用教程非常详细)文件系统通常要包含很多第三方软 ...
- FlowNet2.0论文笔记
原论文标题:FlowNet 2.0: Evolution of Optical Flow Estimation with Deep Networks 文章是对FlowNet的进一步改进,主要贡献为如下 ...
- [CSS] .class1.class2和.class1 .class2的区别
.class1.class2(中间没有空格)匹配的是同时拥有class1和class2的元素 <div class="class1 class2">...</di ...
- UVa101 The Blocks Problem(不定长数组vector)
The Blocks Problem 书上的一道例题,代码思路比较清晰,可以看懂. 相关知识: 若a是一个vector,则: a.size():读取它的大小 a.resize():改变大小 a.pus ...
- php类知识----特别用法
spl_autoload_register注册 <?php #spl_autoload_register-----这个例子是用来打印实例化类的类名 function thereisagameof ...
- .md(markdown)基础语法
markdown基础语法笔记,方便翻看. 1. 标题 标题有3中写法,可混写: (1)# ***,前面#,后面文字,注意,#与文字间有空格,1-6个#分别表示h1-h6,h1.h2下有横线 (2)== ...
- JAVA-IO流大文件拷贝
package com.test.io; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ...
- 题解 [CQOI2015]任务查询系统
题面 解析 首先,我们考虑下暴力的做法: 每次将一个任务的重要度加入到它的区间中, 询问的时候就直接加前\(k\)大. 然而,这样肯会炸的(都说了是暴力了). 其实,我们可以转化一下区间修改(因为区间 ...