Documentï¼caretPositionFromPoint() æ¹æ³
åºçº¿
2025
æè¿å¯ç¨
èª December 2025 èµ·ï¼æ¤ç¹æ§å·²å¨ææ°æµè§å¨ä¸å¾å°æ¯æãä½å¨è¾æ§çè®¾å¤ææµè§å¨ä¸å¯è½æ æ³è¿è¡ã
Document æ¥å£ç caretPositionFromPoint() 屿§è¿åä¸ä¸ª CaretPosition 对象ï¼å
¶ä¸å
å« DOM èç¹ä»¥å该èç¹å
å
æ åå
æ çå符åç§»éã
è¯æ³
js
caretPositionFromPoint(x, y)
åæ°
è¿åå¼
ä¸ä¸ª CaretPosition 对象ã
示ä¾
å¨ä¸é¢çæ¼ç¤ºæ®µè½ä¸åå»ä»»æä½ç½®å³å¯å¨åå»ç¹å¤æå ¥æ¢è¡ç¬¦ãå ¶ä»£ç ä½äºæ¼ç¤ºä¸æ¹ã
æ¼ç¤º
以ä¸ä»£ç é¦å
æ£æ¥ document.caretPositionFromPoint æ¯ææ
åµï¼ä½å¦ææµè§å¨ä¸æ¯æï¼å代ç 伿£æ¥ document.caretRangeFromPoint 并使ç¨å®ã
JavaScript
js
function insertBreakAtPoint(e) {
let range;
let textNode;
let offset;
if (document.caretPositionFromPoint) {
range = document.caretPositionFromPoint(e.clientX, e.clientY);
textNode = range.offsetNode;
offset = range.offset;
} else if (document.caretRangeFromPoint) {
// ä½¿ç¨ WebKit 䏿åéæ¹æ³
range = document.caretRangeFromPoint(e.clientX, e.clientY);
textNode = range.startContainer;
offset = range.startOffset;
} else {
// ä¸¤ä¸ªæ¹æ³é½ä¸æ¯æï¼ä»ä¹é½ä¸å
return;
}
// åªåå² TEXT_NODE
if (textNode?.nodeType === 3) {
let replacement = textNode.splitText(offset);
let br = document.createElement("br");
textNode.parentNode.insertBefore(br, replacement);
}
}
let paragraphs = document.getElementsByTagName("p");
for (const paragraph of paragraphs) {
paragraph.addEventListener("click", insertBreakAtPoint, false);
}
HTML
html
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
è§è
| è§è |
|---|
| CSSOM View Module > # dom-document-caretpositionfrompoint > |