Question

我有包含表格的div。当用户点击它隐藏的div之外时 - 这部分工作得很好。

问题在于用户在div（输入，段落，...）和他的鼠标中选择文本离开模态（点击状态），触发mouseup事件，导致我的div隐藏。

当用户选择文本时，如何忽略mouseup事件？

以下是我的HTML标记：

<div class="body">
    <button id="show-modal">Toggle modal</button>
    <div class="modal">
        <input type="text" name="opportunity-name" \>
        <button>Submit</button>
    </div>
</div>

CSS：

.body {
    position: absolute;
    width: 100%;
    bottom: 0;
    top: 0;
    height: 100%;
    background: green;
}
div.modal {
    background: blue;
    width: 200px;
    height: 130px;
    margin: 0 auto;
    text-align: center;
    padding-top: 70px;
}

JS：

var $modal = $('div.modal');
$('#show-modal').click(function () {
    $modal.fadeIn();
});

$(document).mouseup(function (e) {
    if (!$(e.target).is('div.modal *, div.modal')) {
        $modal.fadeOut(100);
    }
});

Here's a fiddle

Answer 1

当用户选择文本时，如何忽略mouseup事件？

检查文本输入是否具有焦点。例如：

if ( $(input).is(':focus') ) { ... }

在输入中选择文本时触发鼠标向上事件，导致模态窗口隐藏

1 个答案: