恢复网页上文字的选择功能

最近在做一个地图相关的项目，用到BAIDU,GOOGLE MAP API。

为了节省资源地图上的提示框我没直接使用API中的InfoWindow，而是继承抽象基类Overlay(BAIDU),OverlayView(google maps)封装实现的，如下图所示：

因为JS事件冒泡，这个提示框中的文字部分不能使用鼠标选择复制，因为提示框中鼠标事件直接调用了地图的鼠标事件。

在某个炎热的夏天，用户提出需要选择复制提示框中的文字内容，泪崩～～～这个功能不是我限制的呀，是地图事件阻止的（这样和用户解释他可能听不太懂-_-!）

本着用户就是上帝的原则需要修改成文字可选，于是想到阻止JS事件冒泡

假设提示框(infobox)的id为gmnoprint

        var div = document.getElementById('gmnoprint');
        div.onselectstart = function(e){
            stopBubble(e);
        }
        div.onclick = function(e){
            stopBubble(e);
        }
        div.onmousedown = function(e){
            stopBubble(e);
        }
        div.onmousemove = function(e){
            stopBubble(e);
        }
        div.onmouseup = function(e){
            stopBubble(e);
        }

//阻止事件冒泡
function stopBubble(e){var e=window.event||e;e.stopPropagation?e.stopPropagation():e.cancelBubble=true;}

　

　这样处理后在IE浏览器可以选择文字了，但chrome 、firefox浏览器还是不行，在不断调试、翻阅资料后才发现还有几个CSS属性可以控制文字选择：

unselectable="off"
<标签名 unselectable=on> - 禁止选择
Internet Explorer 5.5 追加的属性，可以禁止选择元素的内容。<b> 和 <p> 等等，大多数的标签都能够使用。子元素无法继承此属性。

on 禁止选择。
off 解除禁止选择。默认值。

-moz-user-select:text;
-moz-user-select属性 适用于Firefox
设置用户是否可以选择元素内容。
语法 -moz-user-select: none | text | all | element
auto 用户可以选择元素内容
none 用户不能选择元素内容
text 用户可以选择元素文本

-webkit-user-select:text;
-webkit-user-select 属性 适用于Chrom
设置用户是否可以选择元素内容。
语法 webkit-user-select: auto | none | text

auto 用户可以选择元素内容
none 用户不能选择元素内容
text 用户可以选择元素文本
　最终DIV的代码如下：

<div width="300" id="gmnoprint" unselectable="off" style="-moz-user-select:text;cursor:auto;-webkit-user-select:text;">...</div>

　这样终于完成了用户要求的文字能够选择、复制功能

就这么一个小小的功能几乎花费了我一天的时间，不断的调试、不断的查找资料。

用户一句话累死程序员呀～～～