最近在做一个地图相关的项目，用到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>
这样终于完成了用户要求的文字能够选择、复制功能
就这么一个小小的功能几乎花费了我一天的时间，不断的调试、不断的查找资料。
用户一句话累死程序员呀～～～
