react:阻止事件冒泡
来源:互联网 发布:微软人工智能的布局 编辑:程序博客网 时间:2024/06/10 15:22
假如你有这有一个结构<li><a></a></li>
假如你在a标签上绑定了一个点击click事件,如:$("a").click(function(){alert("a"); });
还在li标签上绑定了一个事件,如:$("li").click(function(){alert("li"); });
如果不加e.preventDefault();
这一语句,结果会在alert("a");
执行后再次执行alert("li")
语句,因为a标签在li标签中,a标签在li标签范围中,在执行a标签上的事件后会执行li标签上的相同类型事件,从内层标签往外层依次执行相同类型事件,从里面往外面,此为冒泡。
import React, {Component} from "react";class Action extends Component{ constructor(props){ super(props); this.handleClick = this.handleClick.bind(this); } handleClick(e){ e.preventDefault(); console.log("this link was clicked"); } render(){ return( <a href="#" onClick={this.handleClick}>Click me</a> ) }}export default Action;
在本实例中,外层事件是一个索引链接,内层事件是以个onClick响应事件,在当前鼠标点击事件中,外层事件被阻止不会执行,只会执行内层事件,响应onClick
阅读全文
0 0
- react阻止冒泡事件
- react:阻止事件冒泡
- React 如何阻止事件冒泡?
- react阻止冒泡事件(使用原生js方法)
- javascript阻止冒泡事件
- 阻止冒泡事件
- Js 冒泡事件阻止
- jQuery阻止事件冒泡
- 阻止js事件冒泡
- Jquery 阻止事件冒泡
- JS阻止事件冒泡
- 阻止事件冒泡
- JS阻止事件冒泡
- javascript阻止事件冒泡
- javascript 阻止事件冒泡
- 阻止事件冒泡
- Js 冒泡事件阻止
- JS事件冒泡(阻止
- 嵌入式裸机开发,全局变量初值不正确
- 第15周项目1(3)-验证冒泡排序算法
- TCP/IP协议:最大传输单元MTU 和 最大分节大小MSS
- docker insecure-registry
- 利用xgboost4j下的xgboost分类模型案例
- react:阻止事件冒泡
- 第十四周项目3-插入排序之希尔排序
- c99 restrict 关键字
- dedecms织梦后台提示用户名不存在
- 排序
- babel-plugin-module-resolver 模块解析插件
- React-native navigator
- 从零开始使用Laravel的图片验证码
- nvidia-smi 命令解读