选中文字之后显示其他层

选中文字这个其实不难，主要还是兼容性的问题

在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