antd-mobile Popover 设置遮罩层, 点击任意位置关闭后点击事件仍往下传递(穿透)

Question

环境: antd-mobile:1.1.3 / web / google chrome

你做了什么？

界面上引用Popover组件, 设置遮罩层, 点击任意位置, 关闭后, 遮罩层下面的ListView itemView 响应了点击事件

你期待的结果是：

关闭遮罩层后, 点击事件应该销毁, 不再往下传递

实际上的结果：

遮罩层下面的ListView itemView 响应了点击事件

关键代码:

<Popover
    mask
    visible={this.state.visible}
    overlay={[
      (<Item key="4" value="scan" data-seed="logId">Test1</Item>),
      (<Item key="5" value="special" style={{whiteSpace: 'nowrap'}}>Test2</Item>)
    ]}
    align={{
      overflow: {adjustY: 0, adjustX: 0},
      offset: [0, 15],
    }}
    onVisibleChange={this.handleVisibleChange}
    onSelect={this.onSelect}>
    <img className={styles.submitIcon} src="/img/icon_more.png"/>
  </Popover>

Answer 1

我也遇到了这个问题，希望大神解答

Answer 2

这个问题也困扰了我很久，由于时间关系来不及去提issue，最后我是这样解决的：
在handleVisibleChange中去阻止事件冒泡

/* eslint global-require: 0 */
import { Popover, NavBar, Icon } from 'antd-mobile';

const Item = Popover.Item;

class App extends React.Component {
  state = {
    visible: true,
    selected: '',
  };
  onSelect = (opt) => {
    // console.log(opt.props.value);
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  };
  handleVisibleChange = (visible) => {
    if (visible) {
      // 遮罩层绑定事件，阻止冒泡
      $('.am-popover-mask').on('click touchstart', (e) => {
        e.stopPropagation()
      })
    } else {
      // 注意解绑事件
      $('.am-popover-mask').off('click touchstart', (e) => {
        e.stopPropagation()
      })
    }
    this.setState({
      visible,
    });
  };
  render() {
    let offsetX = -10; // just for pc demo
    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
      offsetX = -26;
    }
    return (<div>
      <NavBar iconName={false}
        mode="light"
        rightContent={
          <Popover mask
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            visible={this.state.visible}
            overlay={[
              (<Item key="4" value="scan" icon={<Icon type={require('./scan.svg')} size="xs" />} data-seed="logId">扫一扫</Item>),
              (<Item key="5" value="special" icon={<Icon type={require('./qrcode.svg')} size="xs" />} style={{ whiteSpace: 'nowrap' }}>我的二维码</Item>),
              (<Item key="6" value="button ct" icon={<Icon type={require('./help.svg')} size="xs" />}>
                <span style={{ marginRight: 5 }}>帮助</span>
              </Item>),
            ]}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [offsetX, 15],
            }}
            onVisibleChange={this.handleVisibleChange}
            onSelect={this.onSelect}
          >
            <div style={{
              height: '100%',
              padding: '0 0.3rem',
              marginRight: '-0.3rem',
              display: 'flex',
              alignItems: 'center',
            }}
            >
              <Icon type="ellipsis" />
            </div>
          </Popover>
        }
      >
        NavBar
      </NavBar>
    </div>);
  }
}

ReactDOM.render(<App />, mountNode);

Answer 3

看看是否可以通过设置弹出层的样式来解决