首页 > 代码库 > 选中文字之后显示其他层
选中文字之后显示其他层
选中文字这个其实不难,主要还是兼容性的问题
在IE和OPERA下用document.selection
在FF、safari、chrome下就用window.getSelection()这个方法,不过这方法返回的是对象,如果要用的话,就要转换为字符串
先结构部分:
<p id="p1" style ="width:300px"> 我们终究会死。所以我们的人生目标不该是长命百岁,而应该做点自己想做的。 流转的时光,照一脸沧桑。来不及遗忘,来不及细数。眉毛这样短,思念那么长。爱情里只有心甘情愿做傻瓜的人,没有真正的傻瓜 </p> <div id="share" style="position:absolute;width:20px;height:20px;background:red;"></div>
div 必须是绝对定位,div中可以放入分享的图标,这里先用红色底色标记下
首先,先封装一个兼容性函数selectText()
//selectText方法返回选中的文字,直接调用 function selectText(){ //IE、opera下:document.selection //ff、safari、chrome:getSelection(),该方法返回的是对象 if(document.selection){ return document.selection.createRange().text; }else{ return window.getSelection().toString(); }; }
然后是封装一个显示分享层的showShare()
function showShare(oTarget,oShowDiv){ oTarget.onmouseup = function(e){ var e = e || window.event; var left= e.clientX; var top = e.clientY; if(selectText().length > 10 ){ //ie下要延时,不然会影响选择 setTimeout(function(){ oShowDiv.style.display = "block"; oShowDiv.style.left = left + "px"; oShowDiv.style.top = top + "px"; },50); e.cancleBubble = true; }; };
//点击页面其它地方,隐藏分享层 document.onclick = function(){ oShowDiv.style.display = "none"; } };
现在可以根据实际的机构来调用函数了
var oP = document.getElementById("p1"); var oShare = document.getElementById("share"); showShare(oP,oShare );
主要的要点有:兼容性问题,取消冒泡,定时器解决IE选择的BUG
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。