最近在做一个地图相关的项目&＃xff0c;用到BAIDU,GOOGLE MAP API。
为了节省资源地图上的提示框我没直接使用API中的InfoWindow&＃xff0c;而是继承抽象基类Overlay(BAIDU),OverlayView(google maps)封装实现的&＃xff0c;如下图所示&＃xff1a;
因为JS事件冒泡&＃xff0c;这个提示框中的文字部分不能使用鼠标选择复制&＃xff0c;因为提示框中鼠标事件直接调用了地图的鼠标事件。
在某个炎热的夏天&＃xff0c;用户提出需要选择复制提示框中的文字内容&＃xff0c;泪崩&＃xff5e;&＃xff5e;&＃xff5e;这个功能不是我限制的呀&＃xff0c;是地图事件阻止的&＃xff08;这样和用户解释他可能听不太懂-_-!&＃xff09;
本着用户就是上帝的原则需要修改成文字可选&＃xff0c;于是想到阻止JS事件冒泡
假设提示框(infobox)的id为gmnoprint
var div &＃61; document.getElementById(&＃39;gmnoprint&＃39;);div.onselectstart &＃61; function(e){stopBubble(e);}div.onclick &＃61; function(e){stopBubble(e);}div.onmousedown &＃61; function(e){stopBubble(e);}div.onmousemove &＃61; function(e){stopBubble(e);}div.onmouseup &＃61; function(e){stopBubble(e);}//阻止事件冒泡
function stopBubble(e){var e&＃61;window.event||e;e.stopPropagation?e.stopPropagation():e.cancelBubble&＃61;true;}
这样处理后在IE浏览器可以选择文字了&＃xff0c;但chrome 、firefox浏览器还是不行&＃xff0c;在不断调试、翻阅资料后才发现还有几个CSS属性可以控制文字选择&＃xff1a;
unselectable&＃61;"off"
<标签名 unselectable&＃61;on> - 禁止选择
Internet Explorer 5.5 追加的属性&＃xff0c;可以禁止选择元素的内容。 和
等等&＃xff0c;大多数的标签都能够使用。子元素无法继承此属性。
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的代码如下&＃xff1a;
这样终于完成了用户要求的文字能够选择、复制功能
就这么一个小小的功能几乎花费了我一天的时间&＃xff0c;不断的调试、不断的查找资料。
用户一句话累死程序员呀&＃xff5e;&＃xff5e;&＃xff5e;
京公网安备 11010802041100号