React 阻止默认事件和阻止冒泡

2019-03-07 16:12   Tags:

首先有这样一段代码,

很久很久以前有这样一个故事,这要从远古时代说起

fnfn1是一对父子

divparentspanchildren

fnfn1

最近在学react

首先

        ...
        fn(ev){
            alert('children')
        }

        fn1(ev){
           alert('parent') 
        }
        render() {
            return <div onClick={this.fn1.bind(this)}>
                <span onClick={this.fn.bind(this)}>children</span>
            </div>
        }
        ...

一般情况下,原生js写法,阻止冒泡或者阻止默认事件,

原生JavaScript

有这两种

ev.cancelBubble = true
ev.stopPropagation()

但是react比较牛逼,使用ev.cancelBubble没有效果,return false也没有效果

官方也说了,在react中不能使用返回 false 的方式阻止默认行为

 fn(ev){
            alert('children')
            ev.cancelBubble = true
        }

然后使用ev.stopPropagation(),成功干掉默认事件

fn(ev){
            alert('children')
            ev.stopPropagation()
        }

还可以使用

event.preventDefault();

https://reactjs.org/docs/forms.html

另外

后在某乎看到一篇文章,

阻止合成事件与最外层document上的事件间的冒泡,用e.nativeEvent.stopImmediatePropagation();

我的理解就是,在div父级添加事件,点击div内部,阻止默认事件,不知道是不是这样了,文章也没仔细看,

这个没有测试,不知道从何下手

详见壁虎https://zhuanlan.zhihu.com/p/26742034

发表评论

电子邮件地址不会被公开。 必填项已用*标注