模态由于mouseup事件而消失（模态下的突出显示输入字段，而模态外释放鼠标）

Question

一个有趣的错误，其中有一个带有表单输入字段的模态。然后，您在输入字段之一中突出显示文本，因此mousedown事件发生在模式内部，而mouseup事件发生在模式外部。

Chrome 73将点击之外的mouseup事件解释为一次点击，然后关闭该模式。

这是原始的模式代码：

<div class="modal-wrapper" (click)="close()">
    <div class="modal-background"></div>
    <div class="modal-container" (click)="stopEvent($event)">
        <!-- modal content here -->
    </div>
</div>

Answer 1

解决方案是将将模式关闭的click事件更改为mousedown事件：

<div class="modal-wrapper" (mousedown)="close()">
    <div class="modal-background"></div>
    <div class="modal-container" (mousedown)="stopEvent($event)">
        <!-- modal content here -->
    </div>
</div>