Jquery 如果用户在文本区域外单击，则隐藏文本区域，但在鼠标上使其可见在选择文本后离开文本区域

我有一个textarea，如果用户在它外面单击，它应该被隐藏，如果用户在textarea里面单击，它将保持可见

问题是，当用户选择文本区域的文本并将鼠标放在文本区域之外时，文本区域将被隐藏，他无法再复制文本

我怎样才能解决这个问题

HTML:

CSS:

---

只需使用

mousedown（）

事件即可

试试这个：

HTML

<span>Show textarea</span>

<div id="backGround">
    <textarea>Text in textarea</textarea>
</div>

}))

更全面的证明（检查鼠标向下是否在外侧，鼠标向上是否隐藏），但需要优化：

编辑：如果您不想取消隐藏，只需使用：

$("span").on("click", function () {
    $("textarea").show();
});

$(document).mousedown(function (e) {
    var container = $("div");

    if (container.has(e.target).length === 0) {
        $("textarea").hide();
    }
});

---

文本区域在背景中，所以如果我点击文本区域，它会隐藏起来。这是为了什么？当然，这很简单：如果鼠标落在文本区域，不要隐藏它，如果没有，就隐藏它。为什么需要所有额外的逻辑？我很好奇，如果你从外面到里面移动，你可以“取消”隐藏。我认为这是使用鼠标向上而不是鼠标向下的目的。否则你可以用鼠标按下。

textarea {
    position:absolute;
    right:10px;
    bottom:10px;
    display:none;
}

<span>Show textarea</span>

<div id="backGround">
    <textarea>Text in textarea</textarea>
</div>

$('#backGround').click(function () {

 $("textarea").hide();   

(function() {

$("span").on("click", function () {
    $("textarea").show();
});

var wasDown = false;

$(document).mousedown(function (e) {
    wasDown = false;
    var container = $("div");

    if (container.has(e.target).length === 0) {
        wasDown = true;
    }
});

$(document).mouseup(function (e) {
    var container = $("div");

    if (wasDown && container.has(e.target).length === 0) {
        $("textarea").hide();
    }
});

})()

$("span").on("click", function () {
    $("textarea").show();
});

$(document).mousedown(function (e) {
    var container = $("div");

    if (container.has(e.target).length === 0) {
        $("textarea").hide();
    }
});