React 在body上绑定事件以及阻止事件冒泡

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>React 在body上绑定事件以及阻止事件冒泡</title><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script><style>html{height: 100%;}body{height: 100%;background-color: rgba(0,0,0,0.2);}.m-outer{background-color: red;}</style>
</head><body><div id="root"></div><script type="text/babel">class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// 这个绑定是必要的，使`this`在回调中起作用this.handleClick = this.handleClick.bind(this);}componentDidMount() { document.body.addEventListener('click', e => { if (e.target && e.target.matches('#m-btn')) { return; }             console.log('body');});             } componentWillUnmount() { document.body.removeEventListener('click');}                handleClick() {this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}));}render() {return (<button onClick={this.handleClick} id="m-btn">{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}}ReactDOM.render(<Toggle />,document.getElementById('root'));</script>
</body></html>

转载于:https://www.cnblogs.com/xutongbao/p/9924745.html

React 在body上绑定事件以及阻止事件冒泡相关推荐

事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
阻止事件传播阻止事件传播e.stopPropagation() 谷歌浏览器阻止事件传播(冒泡阶段) var oBig = document.getElementById('big');var oS ...
Vue 2_3.vue的v-on键盘事件和阻止事件默认行为
vue中键盘事件的关键字是 v-on:keydown,格式为 v-on:keydown="fun($event)" ($event是vue中的事件对象,和我们传统js中的event ...
js阻止默认事件和阻止事件冒泡浅谈
入行三年,今天重新谈下这两个事件: 一.默认事件,即像 1.a链接点击跳转行为 2.form表单中的button或type为submit的input点击会默认提交submit事件 3.document ...
阻止默认事件与阻止事件冒泡
事件捕获事件由父级向子级传递通用样式: <style>.d1{width: 300px;height: 300px;background-color:tomato;overflow: ...
element组件自带的事件如何阻止其冒泡
如下示例,@confirm.stop并不能组织事件冒泡,那怎么办? <el-popconfirmtitle="这是一段内容确定删除吗?"@confirm.stop=" ...
JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
html 冒泡事件拦截,JavaScript阻止事件冒泡与事件捕获
1.事件冒泡在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. 事件冒泡依次输出:a.div.body 注意:不是所有的事件都能冒泡.blur.focus.loa ...
简单了解事件冒泡和阻止事件冒泡
1.什么叫事件冒泡? 就是在触发事件时候会一层一层向上冒泡(他同时会触发父类的事件) 2.阻止事件冒泡意思就是阻止事件向上传递第一种ie浏览器的阻止事件冒泡利用了一种属性cancelBubbl ...
JS7day(事件对象，事件流，事件捕获和冒泡，阻止事件流动，事件委托，学生信息表案例)
文章目录事件对象获取事件对象部分常用属性事件流事件捕获概念: 事件冒泡概念: 阻止事件流动: 相同的鼠标经过事件: 两种(监听事件)注册事件的区别: 传统on注册(L0) 事件监听注册(L2 ...

React 在body上绑定事件以及阻止事件冒泡

React 在body上绑定事件以及阻止事件冒泡相关推荐

最新文章

热门文章