阅读数:

react项目中取消事件关联的默认动作

0

说明

在传统的html+css+js项目中,会遇到这样一个问题:
一个a标签 走你,我们想实现
这么一个功能,点击a标签,不让跳走而是在点击的时候弹出href地址而已,怎么做呢?
很简单,href是html默认属性,那我们就利用preventDefault 干掉默认,让它乖乖执行我们的自定义
方法。

项目中的坑:我们有个一级页面上面有个button,二级页面有个搜索按钮,默认submit的,巧的是两个按钮的position有重叠,
上篇说了我们是单页应用,不同router控制跳转,按理说一级点击按钮才会跳到二级页面才会展现二级页面,pc和安卓手机
都没问题,但是ios几个版本,不知道什么原因,感觉二级页面在一级加载完的时候已经加载出来只是隐藏而已,当我们点击
一级按钮后,出现了神奇的效果:1、跳到了二级页面;2、自动触发了搜索事件。
后边查了许久,猜可能是延迟点击 问题,试了没反应。最后实在没办法了在一级按钮的事件最后
加了preventDefalut事件神奇般的好了,ios的这个坑到现在还没想明白。

上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
onClick(e) {
this.props.push('/erji');
e.preventDefault();
}
render() {
return (
...
<i className="xx"
onClick={this.onClick}></i>
...
);
}

最后

针对ios的这个坑,虽然解决了,可能是正解也可能歪打正着,还请牛人解释下原因或者正确的解决姿势,
最后说明下:二级页面里有一个iframe,嵌套的一个第三方地址,这个搜索按钮是这个第三方页面里的


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^