0

我想问一下文本范围或其他方法是否可行。我有一个文本。例如像这样：

<div id="test">abcdefghij</div>

我使用文本范围以黄色突出显示文本片段。（我使用发布到 SO 中的示例）。可以为鼠标悬停在突出显示的文本上添加事件侦听器吗？当用户将鼠标悬停在“cdefg”上时，我想做一些事情。这是工作的jsfiddle。

http://jsfiddle.net/8mdX4/673/

我将不胜感激任何想法和建议。

最好的祝福。

编辑：

我想分享我在主题之后使用的方法。我正在使用选择的 focusNode 属性，因为 commonAncestorContainer 获取所有节点的容器 - 而不是当前选择的那个节点。这是演示： http: //jsfiddle.net/zono/Q3ptC/2/ 鼠标悬停在黄色文本显示工具提示（标题属性的内容）上。

4

1 回答 1

1

您在代码中使用document.execCommand了很多样式元素，这很可能会创建一个<span>，但这取决于浏览器。这样做时，每个浏览器都会在您的目标文本中创建它认为合适的元素。据我所知，使用 execCommand 时没有可用的事件管理命令，因此使用此技术将使这些元素的特定事件分配变得困难。

如果我要从头开始编写您的代码，我会使用一种方法window.getSelection并自己创建元素，以便我可以添加我认为合适的事件。

另一种选择是添加 window.getSelection() 一旦你知道它execCommand已经创建了一个元素，找到选择的父节点，并将事件添加到父节点。像这样：

/*At a point where I know a selection is made*/
var sel = window.getSelection();
if (sel.rangeCount) {
    parent = sel.getRangeAt(0).commonAncestorContainer
    if (parent.nodeType != 1) {
        parent = parent.parentNode
    }

    parent.onclick = function() {
        alert("lookie lookie");
    }
}

你的代码用我的例子更新：

http://jsfiddle.net/8mdX4/680/

于 2014-02-05T13:31:38.683 回答