js划词翻译、屏幕取词,取词位置获取(真正解决定位问题)

划词、鼠标选词、翻译这些都是很简单的事一般熟悉js鼠标事件都能搞定,而比较难的是怎么确定我们选中的词在哪个位置执行完翻译的结果该怎么定位,这个问题我在开发翻译插件时摸了个深坑,全网搜索不到可用方案,研究有道的划词翻译插件因它代码压缩也没发现他的解决方案,最终在火狐开发文档里找到了normalize才真正解决了定位问题;

鼠标按下弹起和移动的事件这里就不贴代码了,懂的不需要我贴代码,不懂的去菜鸟或w3c那里讲得更详细

获取鼠标选中的词

var selectText = function(){
		var selectText = window.getSelection?window.getSelection():document.selection.createRange().text;
		return selectText.toString();
	}

获取最终定位

// _e_point 鼠标事件
var getPosAtPoint = function(_e_point) {
		var range;
	    var textNode;
	    var offset;
	    var fanyi_pos = null;
	    var scrollTop = that.getScrollTop();
	    // standard
	    if (document.caretPositionFromPoint) {
	        range = document.caretPositionFromPoint(_e_point.pageX, _e_point.pageY - scrollTop);
	        textNode = range.offsetNode;
	        offset = range.offset;
	    }
	    // WebKit
	    else if (document.caretRangeFromPoint) {
	        range = document.caretRangeFromPoint(_e_point.pageX, _e_point.pageY - scrollTop);
	        textNode = range.startContainer;
	        offset = range.startOffset;
	    }

	    // only split TEXT_NODEs
	    if (textNode.nodeType == 3) {
	        var replacement = textNode.splitText(offset);// 截取鼠标位置之后的文本
	        var spanElement = document.createElement('span');// 创建标识
	        spanElement.id = 'nmh_fanyi_dom';// 设置标识类名
	        textNode.parentNode.insertBefore(spanElement, replacement);// 插入标识
	        var fanyi_dom = document.getElementById('nmh_fanyi_dom');
		    fanyi_pos = fanyi_dom.getBoundingClientRect();
		    fanyi_pos['height'] = fanyi_dom.offsetHeight;// 获取插入标识获得得一行高度
		    fanyi_dom.parentNode.removeChild(fanyi_dom);// 获取到位置后移除掉标识
		    textNode.parentNode.normalize();// 合并文本节点
	    }
	    return fanyi_pos;// 返回位置	    
	}
  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值