在 [email protected] 下超过两级点击事件嵌套，使用event.stopPropagation仍然发生事件冒泡

[Aliveing]

相关平台

微信小程序

复现仓库

https://github.com/Aliveing/report-taro-issues/blob/main/EventPropagation.js
小程序基础库: 2.14.0
使用框架: React

核心代码

import Taro from '@tarojs/taro'
import React, { Component }  from 'react';
import { View, Text } from '@tarojs/components';
class A extends Component {

    onTapParent = (event) => {
        // event.stopPropagation(); // 打开父元素的阻止冒泡后，冒泡多次的只减少冒泡一次，比如五级嵌套的打开后冒泡两次
        console.log('tapping parent', event.currentTarget.id);
    }

    onTapChild = (event) => {
        event.stopPropagation();
        console.log('tapping child');
    }

    render() {
        const styles = "background-color: tomato; padding: 10px; margin-top: 50px; color: white";
        return <View style="background-color: skyblue; padding: 20px; text-align: center">

            <View style="text-align: left">Parent</View>

            {/* 事件冒泡的写法，三级事件嵌套，冒泡一次 */}
            <View onClick={this.onTapParent}>
                <View onClick={this.onTapParent}>
                    <Text style={styles} onClick={this.onTapChild}>Child 三级事件嵌套冒泡(1次)</Text>
                </View>
            </View>

            {/* 事件冒泡的写法，四级事件嵌套，冒泡两次 */}
            <View style="margin-top:30px" onClick={this.onTapParent}>
                <View onClick={this.onTapParent}>
                    <View onClick={this.onTapParent}>
                        <Text style={styles} onClick={(event) => this.onTapChild(event)}>Child 四级事件嵌套冒泡(2次)</Text>
                    </View>
                </View>
            </View>

            <View style="margin-top:30px" onClick={this.onTapParent}>
                <View onClick={this.onTapParent}>
                    <View onClick={this.onTapParent}>
                        <View onClick={this.onTapParent}>
                            <Text style={styles} onClick={(event) => this.onTapChild(event)}>Child 五级事件嵌套冒泡(3次)</Text>
                        </View>
                    </View>
                </View>
            </View>

            {/* 事件不冒泡的写法，三级嵌套顶层节点 bind 指针/父节点箭头函数 */}
            <View style="margin-top:30px" onClick={this.onTapParent.bind(this)}>
                <View onClick={this.onTapParent}>
                    <Text style={styles} onClick={this.onTapChild}>Child 三级嵌套顶层节点bind指针不冒泡</Text>
                </View>
            </View>

            {/* 事件冒泡的写法，四级嵌套顶层节点 bind 指针/父节点箭头函数 */}
            <View style="margin-top:30px" onClick={this.onTapParent.bind(this)}>
                {/* <View onClick={this.onTapParent.bind(this)}> 第二级改成bind不冒泡*/}
                <View onClick={this.onTapParent}>
                    <View onClick={this.onTapParent}>
                        <Text style={styles} onClick={this.onTapChild}>Child 四级嵌套顶层节点bind指针冒泡</Text>
                    </View>
                </View>
            </View>

            {/* 事件不冒泡的写法，两级嵌套不冒泡 */}
            <View style="margin-top:30px" onClick={this.onTapParent}>
                <Text style={styles} onClick={this.onTapChild}>Child 两级嵌套不冒泡</Text>
            </View>

        </View>
    }
}
export default A;

复现步骤

预览（2.25M）

期望结果

超过两级事件嵌套不发生事件冒泡

实际结果

超过两级事件嵌套发生事件冒泡

环境信息

👽 Taro v3.0.16


  Taro CLI 3.0.16 environment info:
    System:
      OS: macOS 11.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.18.3 - /usr/local/bin/node
      Yarn: 1.22.5 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.16 => 3.0.16
      @tarojs/components: 3.0.16 => 3.0.16
      @tarojs/mini-runner: 3.0.16 => 3.0.16
      @tarojs/react: 3.0.16 => 3.0.16
      @tarojs/router: 3.0.16 => 3.0.16
      @tarojs/runtime: 3.0.16 => 3.0.16
      @tarojs/taro: 3.0.16 => 3.0.16
      @tarojs/taro-h5: 3.0.16 => 3.0.16
      @tarojs/webpack-runner: 3.0.16 => 3.0.16
      babel-preset-taro: 3.0.16 => 3.0.16
      eslint-config-taro: 3.0.16 => 3.0.16
      eslint-plugin-taro: 3.0.16 => 3.0.16
      nerv-devtools: ^1.5.7 => 1.5.7
      nervjs: ^1.5.7 => 1.5.7
      react: ^17.0.1 => 17.0.1
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.3

[Aliveing]

[email protected] 下依然存在此问题，以下为 taro info：

👽 Taro v3.0.17


  Taro CLI 3.0.17 environment info:
    System:
      OS: macOS 11.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.18.3 - /usr/local/bin/node
      Yarn: 1.22.5 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.17 => 3.0.17
      @tarojs/components: 3.0.17 => 3.0.17
      @tarojs/mini-runner: 3.0.17 => 3.0.17
      @tarojs/react: 3.0.17 => 3.0.17
      @tarojs/router: 3.0.17 => 3.0.17
      @tarojs/runtime: 3.0.17 => 3.0.17
      @tarojs/taro: 3.0.17 => 3.0.17
      @tarojs/taro-h5: 3.0.17 => 3.0.17
      @tarojs/webpack-runner: 3.0.17 => 3.0.17
      babel-preset-taro: 3.0.17 => 3.0.17
      eslint-config-taro: 3.0.17 => 3.0.17
      eslint-plugin-taro: 3.0.17 => 3.0.17
      nerv-devtools: ^1.5.7 => 1.5.7
      nervjs: ^1.5.7 => 1.5.7
      react: ^17.0.1 => 17.0.1
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.3