Why binding mask handlers on wrap element instand of mask element?

While I reading the source code, a question confuses me.
Why binding mask handlers on wrap element instand of mask element?
For example, the onMaskClick and onMaskMouseUp handlers.

    // At the end of Dialog.tsx.
    return (
      <div className={`${prefixCls}-root`}>
        {this.getMaskElement()}
        <div
          tabIndex={-1}
          onKeyDown={this.onKeyDown}
          className={`${prefixCls}-wrap ${props.wrapClassName || ''}`}
          ref={this.saveRef('wrap')}
          onClick={maskClosable ? this.onMaskClick : null}
          onMouseUp={maskClosable ? this.onMaskMouseUp : null}
          role="dialog"
          aria-labelledby={props.title ? this.titleId : null}
          style={style}
          {...props.wrapProps}
        >
          {this.getDialogElement()}
        </div>
      </div>
    );

Very grateful if someone tell me the reason.
And, please forgive my fool question.

Start with Dialog.tsx and inspect the onMaskClick and onMaskMouseUp handlers, along with the wrap and mask elements shown in the issue. Trace how events are handled and record the reason for binding these handlers to the wrap element; done means the behavior is clearly explained for future readers.