JS清除页面选中内容的兼容方案

JS清除页面选中内容的兼容方案

本文介绍一种利用JavaScript清除页面选中内容的方法，供开发者参考。

在进行DIV拖拽功能开发时，常遇到拖拽过程中意外选中页面文本的问题。为解决此交互体验问题，需要查找清除选区的相关技术方案。

经调研发现，主流浏览器对选区API的支持存在差异：Chrome、Firefox及Opera等浏览器在window对象上提供getSelection属性，而IE浏览器则在document对象上提供selection属性。基于这一差异，可针对性地实现清除选区逻辑。

对于Chrome、Firefox和Opera等非IE浏览器，可通过调用window.getSelection().removeAllRanges()来清除选区；对于IE浏览器，则需调用document.selection.empty()来实现相同效果。

综合上述差异，可编写如下兼容代码：

var clearSlct= "getSelection" in window ? function(){
 window.getSelection().removeAllRanges();
} : function(){
 document.selection.empty();
};

表达式"getSelection" in window用于检测window对象是否包含getSelection属性。若返回true，表明当前浏览器支持该属性（即非IE浏览器）；否则为IE浏览器。

若需彻底禁止用户选中页面内容，可结合事件监听实现：

//防止鼠标选中内容（当鼠标松开时清除选中内容）
window.onmouseup=function(){
 clearSlct();
}
   
//防止通过键盘选中内容（当按键松开时清除选中内容）
window.onkeyup=function(){
 clearSlct();
}
 
//使用jQuery的方法
$(window).on("mouseup keyup",function(){
 clearSlct();
});

上述方案可有效辅助JavaScript程序设计，提升页面交互体验。