每周一巧开通暨第一巧发布

开通一个“每周一巧”的新分类，每周都会发布一条有关XHTML, CSS和JavaScript等的小技巧。一来分享经验，二来防止本人越来越懒，保证每周至少有一篇blog，也好让本人的feed被刷得勤快点。另外宣布一个消息，ppk on javascript已经中止笔记啦（虽然我已经读完了），因为这本书的中文版已经在翻译了（不是我），避免重复劳动，就决定停止了，总的来说，我认为精华都在我所做笔记的前两章里了

那么，开篇第一巧是：防止文本选择。

当然啦，我没说禁止，因为我们的目的绝不是说防止读者从我们的网站拷贝东西（你想用于此目的也是可以的，但只能防菜鸟而已啦），我们的目的是防止一些默认的选择行为，以让我们的JavaScript程序运行起来更平滑。举个例子吧，现在的拖放程序是满天飞啊，你知道，在浏览器里，按着鼠标拖动的默认行为是：鼠标经过的文本会被选中，反白高亮，这就导致不好的用户体验（凡事说到这个大词，绝对有搞头，我也不能免俗，sorry）了。好吧，为避滥增字数的嫌疑，我就把本周的即时贴公布如下：

    function disableMouseSelection(element){
        if (element.onselectstart !== undefined){
            element.onselectstart = returnFalse;
        }
        else if (element.style.MozUserSelect !== undefined){
            element.style.MozUserSelect = "none";
        }
        else if (element.style.KhtmlUserSelect !== undefined){
            element.style.KhtmlUserSelect = "none";
        }
        else {
            element.onmousedown = returnFalse;
        }

        if (element.ondrag !== undefined){
            element.ondrag = returnFalse;
        }
    }
    disableMouseSelection(document.documentElement);//把document的根传入，就可以防止整个页面被选择的可能了

既然是巧，一切都是自我解释，就没有什么好阐述的了。彪悍的人生不需要XX，强悍的代码也不需要注释。其实无形中我也公布第二巧了，就是，在基于Gecko和KHTML的浏览器中，防止选择文本是可以通过样式设置来实现了，即

selector {-moz-user-select: none; -khtml-user-select:none; user-select: none;}

废话既然已经一箩筐，我就继续展开吧。其实这是CSS3中User Interface的一个性质：user-select，Gecko和KHTML让我们超前体验。更多详细的，你问Google或者你觉得百度一下，你就知道，那就百度吧 XD。

This entry was posted on Tuesday, February 27th, 2007 at 23:54 and is filed under JS / Dom. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.