防止内容被选中

现在的位置: 首页 > 综合 > 正文

防止内容被选中

2012年07月14日 ⁄ 综合 ⁄ 共 4179字 ⁄ 字号小中大 ⁄ 评论关闭

在开发拖动效果时，有一个非常恼人的地方要处理时，就是拖动时，文本被选中蓝色一片，容易造成用户分心，有损用户体验。通常我们是用下面代码来清理selection：


             if(window.getSelection){//w3c
                window.getSelection().removeAllRanges();
              }else  if(document.selection){
                document.selection.empty();//IE
              }

但这东西在谷歌浏览器中，快速拖动还是会出现蓝色（人家的渲染效率就是高），另外，每拖动一像素就清理一次，这频繁的调用对于一些旧式浏览器可不是好事。最近研究CSS3，发现user-select这个东西，终于搞定这问题了。

首先，我们要检测浏览器是否支持它，FF与webkit系浏览器是支持，IE9与opera11是不支持。


//by 司徒正美
//http://www.cnblogs.com/rubylouvre/archive/2011/03/28/1998223.html
      var getStyleName= (function(){
        var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'];
        var reg_cap = /-([a-z])/g;
        function getStyleName(css, el) {
          el = el || document.documentElement;
          var style = el.style,test;
          for (var i=0, l=prefixes.length; i 
对于不支持的浏览器，我们可以借助它们的一些私有属性与事件，如unselectable，onselectstart。当拖动时，我们把它们绑定在文档对象上就行了。
             if(typeof userSelect === "string"){
                return document.documentElement.style[userSelect] = "none";
              }
              document.unselectable  = "on";
              document.onselectstart = function(){
                return false;
              }

当拖动结束时，我们再让文档变回可选择模式，注意一些值的变化，都是很奇特的名字。
              if(typeof userSelect === "string"){
                return document.documentElement.style[userSelect] = "text";
              }
              document.unselectable  = "off";
              document.onselectstart = null;

具体应用见下：
<br />
<!doctype html><br />
<html><br />
  <head><br />
    <title>行拖动 by 司徒正美</title><br />
    <script><br />
      window.onload = function(){<br />
        //绑定事件<br />
        var addEvent = document.addEventListener ? function(el,type,callback){<br />
          el.addEventListener( type, callback, !1 );<br />
        } : function(el,type,callback){<br />
          el.attachEvent( "on" + type, callback );<br />
        }<br />
        //判定对样式的支持<br />
        var getStyleName= (function(){<br />
          var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'];<br />
          var reg_cap = /-([a-z])/g;<br />
          function getStyleName(css, el) {<br />
            el = el || document.documentElement;<br />
            var style = el.style,test;<br />
            for (var i=0, l=prefixes.length; i < l; i++) {<br />
              test = (prefixes[i] + css).replace(reg_cap,function($0,$1){<br />
                return $1.toUpperCase();<br />
              });<br />
              if(test in style){<br />
                return test;<br />
              }<br />
            }<br />
            return null;<br />
          }<br />
          return getStyleName;<br />
        })();<br />
        var userSelect = getStyleName("user-select");</p>
<p>        //精确获取样式<br />
        var getStyle = document.defaultView ? function(el,style){<br />
          return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)<br />
        } : function(el,style){<br />
          style = style.replace(/\-(\w)/g, function($, $1){<br />
            return $1.toUpperCase();<br />
          });<br />
          return el.currentStyle[style];<br />
        }<br />
        var dragManager = {<br />
          y:0,</p>
<p>          dragStart:function(e){<br />
            e = e || event;<br />
            var handler = e.target || e.srcElement;<br />
            if(handler.nodeName === "TD"){<br />
              handler = handler.parentNode;<br />
              dragManager.handler = handler;<br />
              if(!handler.getAttribute("data-background")){<br />
                handler.setAttribute("data-background",getStyle(handler,"background-color"))<br />
              }<br />
              //显示为可移动的状态<br />
              handler.style.backgroundColor = "#ccc";<br />
              handler.style.cursor = "move";<br />
              dragManager.y = e.clientY;<br />
              //★★★★★★★★★★★★★★★★★★★★<br />
              if(typeof userSelect === "string"){<br />
                return document.documentElement.style[userSelect] = "none";<br />
              }<br />
              document.unselectable  = "on";<br />
              document.onselectstart = function(){<br />
                return false;<br />
              }<br />
              //★★★★★★★★★★★★★★★★★★★★<br />
            }<br />
          },<br />
          draging:function(e){//mousemove时拖动行<br />
            var handler = dragManager.handler;<br />
            if(handler){<br />
              e = e || event;</p>
<p>              var y = e.clientY;<br />
              var down = y > dragManager.y;//是否向下移动<br />
              var tr = document.elementFromPoint(e.clientX,e.clientY);<br />
              if(tr && tr.nodeName == "TD"){<br />
                tr = tr.parentNode<br />
                dragManager.y = y;<br />
                if( handler !== tr){<br />
                  tr.parentNode.insertBefore(handler, (down ? tr.nextSibling : tr));<br />
                }<br />
              };<br />
            }<br />
          },<br />
          dragEnd:function(){<br />
            var handler = dragManager.handler<br />
            if (handler) {<br />
              handler.style.backgroundColor = handler.getAttribute("data-background");<br />
              handler.style.cursor = "default";<br />
              dragManager.handler = null;</p>
<p>            }<br />
             //★★★★★★★★★★★★★★★★★★★★<br />
              if(typeof userSelect === "string"){<br />
                return document.documentElement.style[userSelect] = "text";<br />
              }<br />
              document.unselectable  = "off";<br />
              document.onselectstart = null;<br />
              //★★★★★★★★★★★★★★★★★★★★<br />
          },<br />
          main:function(el){<br />
            addEvent(el,"mousedown",dragManager.dragStart);<br />
            addEvent(document,"mousemove",dragManager.draging);<br />
            addEvent(document,"mouseup",dragManager.dragEnd);</p>
<p>          }<br />
        }<br />
        var el = document.getElementById("table");<br />
        dragManager.main(el);</p>
<p>      }</p>
<p>    </script><br />
    <style><br />
      .table{<br />
        width:60%;<br />
        border: 1px solid red;<br />
        border-collapse: collapse;<br />
      }<br />
      .table td{<br />
        border: 1px solid red;<br />
        height: 20px;<br />
      }<br />
    </style><br />
  </head><br />
  <body><br />
    <h1>行拖动 by 司徒正美</h1><br />
    <table  id="table" class="table"><br />
      <tbody><br />
        <tr><br />
          <td>1</td><br />
          <td>One</td><br />
          <td>dom.require</td><br />
        </tr><br />
        <tr id="2" ><br />
          <td class="2">2</td><br />
          <td>Two</td><br />
          <td>ControlJS </td><br />
        </tr><br />
        <tr id="3" ><br />
          <td class="3">3</td><br />
          <td>Three</td><br />
          <td>HeadJS</td><br />
        </tr><br />
        <tr id="4" ><br />
          <td class="4">4</td><br />
          <td>Four</td><br />
          <td>LAB.js</td><br />
        </tr><br />
        <tr id="5" ><br />
          <td class="5">5</td><br />
          <td>Five</td><br />
          <td>$script.js</td><br />
        </tr><br />
        <tr id="6" ><br />
          <td class="6">6</td><br />
          <td>Six</td><br />
          <td>NBL.js</td><br />
        </tr><br />
      </tbody><br />
    </table><br />
  </body><br />
</html></p>
<p>

【上篇】Datagrid,DataList,Repeate等的数据格式设置表达式
【下篇】国际贸易理论的发展及其阶段划分

作者: minx

该日志由 minx 于12年前发表在综合分类下，最后更新于 2012年07月14日.
转载请注明: 防止内容被选中 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

防止内容被选中

作者: minx

书签

最新文章New

本站推荐

返回首页