antd中的popover组件点击页面空白处自动隐藏是如何实现的？

Question

如题，它没有依靠mask层，我想知道这隐藏的事件是绑定在哪的？

Answer 1

我翻了下源码 是rc-trigger里面

    if (state.popupVisible) {
      var currentDocument = void 0;
      if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextMenuToShow())) {
        currentDocument = props.getDocument();
        this.clickOutsideHandler = addEventListener(currentDocument, 'mousedown', this.onDocumentClick);
      }
      // always hide on mobile
      if (!this.touchOutsideHandler) {
        currentDocument = currentDocument || props.getDocument();
        this.touchOutsideHandler = addEventListener(currentDocument, 'touchstart', this.onDocumentClick);
      }
      // close popup when trigger type contains 'onContextMenu' and document is scrolling.
      if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
        currentDocument = currentDocument || props.getDocument();
        this.contextMenuOutsideHandler1 = addEventListener(currentDocument, 'scroll', this.onContextMenuClose);
      }
      // close popup when trigger type contains 'onContextMenu' and window is blur.
      if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) {
        this.contextMenuOutsideHandler2 = addEventListener(window, 'blur', this.onContextMenuClose);
      }
      return;
    }
    
      this.onDocumentClick = function (event) {
    if (_this5.props.mask && !_this5.props.maskClosable) {
      return;
    }

    var target = event.target;
    var root = findDOMNode(_this5);
    if (!contains(root, target) && !_this5.hasPopupMouseDown) {
      _this5.close();
    }
  };

附上一篇rc-trigger源码解析

Answer 2

绑在 body 上吧。再判断下 e.target。

Answer 3

可用 设置 tabIndex 监听 blur

Answer 4

绑定body 点击隐藏 然后在弹窗的点击事件阻止事件冒泡

Answer 5

hi~ 这个问题你解决了么，关闭点击空白处的自动隐藏