我可以在JavaScript中模擬文本選擇嗎？

Question

我想發出一個鼠標事件 ，該事件選擇“ 矩形 ”內的所有文本。
例：
從（x ₁ ，y ₁ ）到（x ₂ ，y ₂ ）中選擇所有文本

（x ₂ ，y ₂ ）_ _ _ _ _ _（x ₁ ，y ₂ ）
| |
| Text |
| |
（x ₂ ，y ₁ ）_ _ _ _ _ _（x ₁ ，y ₁ ）

到目前為止我嘗試過的是：
我的方法是：
同時/異步發出mousedown和mousemove事件。
我的想法是： “當鼠標按下/按下時移動鼠標等效於選擇文本”。

但是，這似乎不起作用，我嘗試異步（同時）使用mosedown和mosemove事件，請參見下面的代碼：

的HTML

<div id="bdy">
<button id="btn">
    hello
</button>
<div>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Omnis, eaque amet! Aspernatur, voluptatum odit! Exercitationem
    et debitis voluptatem. Atque quam animi sint asperiores cupiditate
    laudantium aspernatur. Placeat quod sit ea.
</div>
</div>

的CSS

body{
    width: 100vw;
    height: 100vh;
}

JS

let mouseDownEvent = new MouseEvent("mousedown", {
    clientX: 10,
    clientY: 10,
});

let mouseMoveEvent = new MouseEvent("mousemove", {
    clientX: 20,
    clientY: 20,
});

document.getElementById("bdy").addEventListener("mousedown", ()=>{
    console.log("hello");
})

document.getElementById("bdy").addEventListener("mousemove", (e)=>{
    console.log(e.clientX);
    console.log(e.clientY);
})
async function g(){
document.getElementById("bdy").dispatchEvent(mouseDownEvent)
}
async function h(){
document.getElementById("bdy").dispatchEvent(mouseMoveEvent)
}

g();
h();

請參閱CODEPEN示例

可以使用HTML ， CSS和Vanilla JavaScript （我寧願不使用 JQUERY ）來完成此操作嗎？
如果可以的話，請問您能獲得關於有用信息的som資源，這些信息可以對我的實施有所幫助嗎？

Answer 1

嘗試這個 ：

<div id="bdy" onmouseover="yourFunction(this)">
</div>

這應該工作

Answer 2

方法1

這是css 用戶選擇屬性，它的工作方式如下：

        .force-select-all {
           -webkit-user-select: all;
           -moz-user-select: all;
           -ms-user-select: all;
            user-select: all;
        }

現場演示

 @import 'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700'; html, body { height: 100%; overflow: hidden; } body { font-family: 'Source Code Pro', monospace; display: flex; align-items: center; justify-content: center; background: #eee; } .area { background: white; padding: 20px; } pre, code { font-family: 'Space Mono', monospace; } pre { user-select: all; margin: 0; padding: 10px 0; white-space: pre-wrap; } /* Probably don't do this... as the auto-selecting behavior is weird enough, a different selection color might make the user not understand what's happening at all. pre::selection { background: yellow; } */ p span { font-size: 0.8rem; background: #fff9c2; padding: 2px 5px; } h1 span { font-size: 1.0rem; display: block; } code { color: darkorange; } h1 { margin: 0 0 15px 0; } p { margin: 0 0 25px 0; } 

 <div class="area"> <h1> <span>Demo of <code>user-select: all;</code></span> SVG Shape Cheatsheet </h1> <p><span>Click line to select all, in supporting browsers.</span></p> <pre>&lt;line x1="0" y1="0" x2="10" y2="10" stroke="black">&lt;/line></pre> <pre>&lt;rect x="0" y="0" width="10" height="10">&lt;/rect></pre> <pre>&lt;circle cx="5" cy="5" r="5">&lt;/circle></pre> <pre>&lt;ellipse cx="10" cy="5" rx="10" ry="5">&lt;/ellipse></pre> <pre>&lt;polygon points="0,0 10,5 20,0 20,20 10,15 0,20">&lt;/polygon></pre> <pre>&lt;polyline points="0,0 10,5 20,0 20,20 10,15 0,20" stroke="black">&lt;/polyline></pre> <pre>&lt;path d="M65,10 a50,25 0 1,0 50,25">&lt;/path></pre> </div> 

方法2：

JavaScript方式：（Div或btn單擊||懸停）

現場演示

 function selectText(containerid) { if (document.selection) { // IE var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); } } 

 body{ width: 100vw; height: 100vh; } #content { margin: 20px; padding: 2px; background: #e5fcd9; } #content::before { content: ""; } 

 <div id="bdy"> <button id="btn" onclick="selectText('content')"> hello click me </button> <button id="btn" onmouseover="selectText('content')"> hover me </button> <p>selectable rectangle:</p> <div id="content" onclick="selectText('content')"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis, eaque amet! Aspernatur, voluptatum odit! Exercitationem et debitis voluptatem. Atque quam animi sint asperiores cupiditate laudantium aspernatur. Placeat quod sit ea. </div> Here out of your selectable rectangle! Does not auto select. </div>