监听子元素未知标签鼠标选中文字事件
时间: 2023-07-31 21:08:08 浏览: 55
要监听子元素的选中文字事件,可以使用 `selectionchange` 事件。该事件会在用户选择文本或取消选择文本时触发,可以通过 `window.getSelection()` 方法获取当前的选区对象,从而获取选中的文本。
下面是一个示例代码:
```html
<div id="parent">
<p>段落1</p>
<div class="selectable">可选中元素</div>
<a href="#">链接</a>
</div>
```
```javascript
const parent = document.getElementById('parent');
parent.addEventListener('selectionchange', function(event) {
const selection = window.getSelection();
const selectedText = selection.toString();
let element = selection.anchorNode.parentNode;
while (element !== parent) {
if (element.classList.contains('selectable')) {
console.log('选中的文本:', selectedText);
console.log('选中文本的父元素:', element);
break;
}
element = element.parentNode;
}
});
```
在上面的代码中,我们将 `selectionchange` 事件绑定到了父元素 `div` 上,然后在事件处理程序中获取当前的选区对象,并通过 `toString()` 方法获取选中的文本。接下来,我们通过 `while` 循环遍历选区的父级元素,判断父级元素是否存在 `selectable` 类名。如果存在,就表示该元素是我们想要监听的元素类型,可以进行相应的处理。如果遍历到了父元素 `div`,仍然没有找到符合条件的元素,就可以退出循环。
需要注意的是,`selectionchange` 事件只有在文本被选中或取消选中后才会触发,因此无法实时监听正在选中的文本。如果需要实时监听选中的文本,可以考虑使用 `mouseup` 事件来模拟实现。