我查看了该站点上的其他答案,但发现对我没有任何用处。如果您认为我可能忽略了什么,请告诉我!
无论如何,我想根据鼠标位置创建一个范围。我希望它的工作方式与鼠标左键的工作方式完全相同。您在 DOM 中单击,它会放下一个文本光标,您进行拖动,然后范围对象会实时更新选择对象,然后您就会获得“选择”。
但是,我无法找到一种方法让它与任何其他鼠标按钮或键盘键一起工作。
LMB 是如何赋予它这种能力的?我似乎无法在任何地方找到答案。
有什么建议吗?
类似地,是否有可能开发一些东西可以精确到 DOM 元素 parentNode 的 childNode 中的字符,以便当您将鼠标悬停在控制台上时,字符会显示在控制台中?
最佳答案
这是可能的,我之前已经在 Stack Overflow 上发布了从鼠标事件创建范围的代码:
https://stackoverflow.com/a/12924488/96100
这是一个允许使用鼠标右键进行选择的演示:
http://jsfiddle.net/timdown/BpjyG/6/
它包括来自链接答案的代码以及以下内容:
var anchorRange;
function mouseMove(evt) {
evt = evt || window.event;
var range = getMouseEventCaretRange(evt), sel, selRange;
if (typeof range.setEndPoint != "undefined") {
// Old IE
selRange = anchorRange.duplicate();
selRange.setEndPoint("EndToEnd", range);
if (selRange.text == "") {
// Try the other way round
selRange = anchorRange.duplicate();
selRange.setEndPoint("StartToStart", range);
}
selRange.select();
} else if (window.getSelection) {
sel = window.getSelection();
if (sel.extend) {
// This is ideal: we can create forwards and backwards selections
// simply by moving the focus using extend()
sel.extend(range.startContainer, range.startOffset);
} else {
// We'll need to create a range and test for backwardsness
selRange = document.createRange();
selRange.setStart(sel.anchorNode, sel.anchorOffset);
selRange.setEnd(range.startContainer, range.startOffset);
if (selRange.collapsed) {
// Try the other way roound
selRange.setStart(range.startContainer, range.startOffset);
selRange.setEnd(sel.anchorNode, sel.anchorOffset);
}
selectRange(selRange);
}
}
}
function mouseUp(evt) {
evt = evt || window.event;
if (evt.button == 2) {
if (document.releaseCapture) {
document.releaseCapture();
}
document.onmousemove = null;
document.onmouseup = null;
anchorRange = null;
}
}
document.oncontextmenu = function() {
return false;
};
document.onmousedown = function(evt) {
evt = evt || window.event;
if (evt.button == 2) {
rightMouseButtonDown = true;
var range = getMouseEventCaretRange(evt);
anchorRange = range;
selectRange(range);
if (document.body.setCapture) {
document.body.setCapture();
}
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
return false;
}
};
关于javascript - 如何从一个点(X 和 Y 坐标)创建一个范围对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18643515/