Question

我需要实现一个可以单击对象的接口，但是该对象的一个区域会执行另一个操作，如下所示：

|-----------|
|        |  | -> clicking on this small area does an action
|        ---|
|           |
|           |
|           | -> clicking on this area does another action
|           |
|-----------|

我做了类似这种结构的实现：

<View> // Container
  <Touchable onPress={do X}> // Large area
  <Touchable onPress={do Y} style={{position: absolute, top: 0, right: 0}}> // Small area
</View>

问题是小区域永远不会激活onPress道具。事件总是在大面积上触发。

有人可以帮我这个吗？

谢谢！

Answer 1

我不确定您是否有任何样式可以显示小容器，但如果没有宽度或高度，它将不会触发，因此请检查以确保您已设置宽度和高度：

smallContainer: {
    width: 120, // set this
    height:100, // set this
    position:'absolute',
    top:0,
    right:0
}

我已让您的设置正常here。代码也在下面。

https://rnplay.org/apps/StpOXg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var SampleApp = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <View style={{flexDirection:'row'}}> 
          <TouchableHighlight onPress={ () => alert('largeContainer') } style={styles.container1}>
                    <View><Text>Hello1</Text></View>
            </TouchableHighlight>
          <TouchableHighlight onPress={ () => alert('smallContainer') }  style={styles.container2}>
                <View><Text>Hello2</Text></View>
            </TouchableHighlight>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  container1: {
    width:320,
    height:300,
    backgroundColor: 'red'
  },
  container2: {
    width: 120,
    height:100,
    position:'absolute',
    backgroundColor: 'green',
    top:0,
    right:0
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Answer 2

我可以想象有一些可能出错的问题。

只是为了确保它不是显而易见的：第二个div有高度/宽度吗？如果它是零大小，您将无法触摸它。我会假设情况并非如此，所以更有可能，
你确定两个处理程序都没有触发吗？如果不在较小/内部div的事件处理程序中调用event.stopPropagation（），则事件可以在链中传播。在这种情况下，它可能正在执行第一个处理程序，然后传播到第二个处理程序。
根据您的所有CSS，可能存在z-index或隐藏元素问题，要么将第一个div叠加在第二个div的顶部，要么完全隐藏第二个div（display：none）。

旁白：

有时会影响到你的一个棘手的事情是，React在本机浏览器事件之外实现了自己的事件。这意味着如果对React处理程序中的事件调用stopPropagation（），它将停止React事件的传播，但不会停止基础浏览器事件的传播。所以，如果由于某种原因你在React之外有一些事件的处理程序（使用JS或jQuery添加事件处理程序而不是反应），那些非React处理程序仍然会在你完成stopPropagation（）之后触发。我认为这不是你的问题。

嵌套可触摸绝对位置

2 个答案: