Taro: e.stopPropagation() 无效

[johnbian]

问题描述
e.stopPropagation() 无效

复现步骤

 navigateTo (id) {
    console.log(id)
    // Taro.navigateTo({url: `../../pages/serviceDetail/index?id=${id}`})
  }

  add (e) {
    e.stopPropagation()
    console.log('add')
  }

期望行为
点击 add 不走navigateTo
报错信息
现在是 走完 add（） 还会 再走 navigateTo（）
输出会是 ‘add’ ,id
系统信息

• 操作系统: [mac 10.12.6]
• Taro 版本 [e.g. v1.0.7]
• Node.js 版本 [e.g. v8.10.0]

[heynext]

+1

[luckyadam]

收到~

[johnbian]

@luckyadam 大佬，这个在1.0.7后面版本中修复了嘛？

[jimczj]

@johnbian AtIcon 换成 View 还会吗，看看是否跟 Taro-UI 有关

[johnbian]

@jimczj hi，大佬，我换成 Taro的Text 还是会， 版本没有升级。taro版本1.0.7。需要升级不？

[johnbian]

@jimczj 大佬 taroV1.1 解决这个了嘛？

[jimczj]

@luckyadam 涛哥看看咯，不是 taro-ui 这边的问题

[yuche]

看一下你改成 Text 之后编译到 wxml，onClick 有没有变成 catchtap

[johnbian]

@yuche 大佬，Text 的 onClick 编译后是 bindtap。

[yuche]

@johnbian 发一下你错误编译的 jsx 文件看看？发代码串不要截图。

[johnbian]

@jimczj @yuche 大佬，sorry, 是 taroUI 影响的 我之前换成text 没有加上阻止冒泡方法。今天才发现。换成text，e.stopPropagation()就生效了。
"taro-ui": "^1.2.2"
AtIcon编译：
wxml:
<at-icon bindonclick="add" __triggerObserer="{{ _triggerObserer }}" value="add-circle" size="20" color="#333" __fn_onClick="{{true}}" data-e-add-so="this" data-e-add-a-a="{{detail}}" data-e-add-a-b="{{index}}" data-e-add-a-c="{{key}}"></at-icon>
add 方法js：
`{
key: "add",
value: function add(detail, index, key, e) {
var _this3 = this;

  e.stopPropagation();
  var _state = this.state,
      choiceServices = _state.choiceServices,
      listall = _state.listall;

  listall[index].capabilites[key].choosen = true;
  this.setState({
    choiceServices: [].concat(_toConsumableArray(choiceServices), [detail]),
    listall: listall
  }, function () {
    return _this3.getShowPrice(_this3.state.choiceServices);
  });
}

}`

[yuche]

@johnbian 下个版本会修复，这个问题实际上是 Taro 没有处理自定义组件的冒泡事件

[johnbian]

thx，辛苦。

[xiazhangli]

请问，这个问题解决了吗？

[XIXIAOSHI124]

@luckyadam 请问这个问题解决了吗？我也遇到了同样的问题

[yuche]

自定义组件阻止冒泡目前还有问题，建议在自定义组件包一层 view 然后在包的那一层 view 上处理冒泡

[xuxiaoxiao312]

自定义组件阻止冒泡目前还有问题，建议在自定义组件包一层 view 然后在包的那一层 view 上处理冒泡

你好，请问Button内的view是无法阻止冒泡吗？

<Button onClick={this.redirect.bind(this)}>
    <View onClick={this.test.bind(this)}>测试</View>
 </Button>

这样写点击测试不会触发test,直接执行了redirect，把外面的button换成view就可以

[dingzhaowei]

我也遇到了同样的问题，代码结构类似，也用到了AtIcon

[soqt]

还是没有解决方案吗？这个错误好久了

[helsonxiao]

还是没有解决方案吗？这个错误好久了

可以在"自定义组件"外包一层 <View></View>，然后依靠这层 View 阻止事件继续冒泡。

[tinyzh]

<View onClick={this.handleParent.bind(this)}>
  <View onClick={this.handleStop.bind(this)}>
    <View onClick={this.handleChild.bind(this)}></View>
  </View>
</View>
# js
handleStop(e){
 e.stopPropagation()
}

[mqliutie]

@tinyzh 你的taro什么版本？我包一层还是不行

[tinyzh]

@mqliutie 1.2.13

[asbstty]

913 请问一下，始终都会阻止事件冒泡这个问题修复了吗？

[wkl007]

goReOrder = (item,index) => {
    xxxxxx
}


<View onClick={e => e.stopPropagation()}>
     <AtButton type='primary'  className='button' size='small' onClick={() => this.goReOrder(item, index)}>
         续住
     </AtButton>
</View>

现在我这是这样处理的

[HuChundong]

貌似还没解决？必须新加一层View

[HuChundong]

加了一层 View 好像也没有效果，或许是我的姿势不正确

      <View onClick={(e) => {e.stopPropagation()}}>
        <AtButton
          size='small'
          circle
          className='dcs-button'
          onClick={this.props.onEdit}
        >修改</AtButton>
      </View>

[shangyu95]

加了一层 View 好像也没有效果，或许是我的姿势不正确

      <View onClick={(e) => {e.stopPropagation()}}>
        <AtButton
          size='small'
          circle
          className='dcs-button'
          onClick={this.props.onEdit}
        >修改</AtButton>
      </View>

解决了，感谢老哥

[shenghanqin]

@johnbian 你可以试试看最新版有木有解决这个问题。感谢。

[daiyun169]

请问这个要在什么版本解决，目前解决办法

自定义按钮 可以在按钮click 阻止冒泡

[BoringDays]

2.0.4，非自定义组件，在需要阻止冒泡的View外面加一层view阻止冒泡也不行？编译出来还是bindtap

[yangbo5207]

Taro 2.0.7 函数式组件 问题仍然存在

在需要阻止冒泡的View外面加一层view阻止冒泡也不行？编译出来还是bindtap

我尝试了箭头函数，和bind

编译结果

[Chen-jj]

试试 Taro3 吧

[MSYuanMei]

Taro 3也有这个问题

[hanpt]

这问题啥时候能好啊

[harwinvoid]

Taro 3也有这个问题

+1

[NTBrave]

解决方法有吗，h5可以，编译成小程序就不行了，有替代方法不？

[nanxiaobei]

还是遇到这个问题。

Taro v3.0.26