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

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

clipboard.png

阅读 545
评论 2019-08-14 提问
    4 个回答

    我翻了下源码 是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源码解析

    评论 赞赏 2019-08-30

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

      评论 赞赏 2019-08-14

        可用 设置 tabIndex 监听 blur

        评论 赞赏 2019-08-14

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

          评论 赞赏 2019-08-16
            撰写回答

            登录后参与交流、获取后续更新提醒