javascript - 由于 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>

标签： javascriptangulargoogle-chromemodal-dialog

Answer 1

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

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