一、前言                            

在为IE5.5~9polyfill HTML5新特性placeholder时需要阻止元素被选中,因此在网上、书上查阅相关资料,记录在此以便日后查阅。

二、IE10+实现方式──CSS3                    

  1. .unselect {
  2. -webkit-user-select: none;
  3. -moz-user-select: none;
  4. -khtml-user-select: none;
  5. -ms-user-select: none;
  6.  
  7. /* 以下两个属性目前并未支持,写在这里为了减少风险 */
  8. -o-user-select: none;
  9. user-select: none;
  10. }

user-select: auto; => 用户可以选中元素中的内容

user-select: none; => 用户不可选中元素中的内容

user-select: text; => 用户可以选中元素中的文字

目前这个 user-select 兼容 Chrome 6+、Firefox、IE 10+、Opera 15+、Safari 3.1+。

三、IE5.5~9的实现──unselectable属性                

  1. <span unselectable="on"></span>

由于unselectable属性不具有继承性,所以要遍历所有子元素并为各子元素添加该属性才有效。

  1. // 将元素及其后代元素均设置为不可选择
  2. var unselectable = function(root){
  3. root.setAttribute('unselectable', 'on');
  4. var descendant = root.getElementsByTagName("*");
  5. var rTagName = /input|iframe|textarea|select/i;
  6. for (var i = , el; el = descendant[i++];){
  7. if (!rTagName.test(el.tagName)){
  8. el.setAttribute('unselectable', 'on');
  9. }
  10. }
  11. };

四、参考                             

《JavaScript框架设计》──9.3.2 user-select

http://www.html-js.com/article/The-Laispace-block-element-is-selected-and-clear-the-check-method

JS魔法堂:阻止元素被选中的更多相关文章

  1. JS与CSS阻止元素被选中及清除选中的方法总结

    有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...

  2. JS魔法堂:元素克隆、剪切技术研究

    一.前言 当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新元素.而在部分浏览器中,通过复制来获取新元素的效率 ...

  3. JS魔法堂:LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

  4. JS魔法堂:IMG元素加载行为详解

    一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...

  5. JS魔法堂:属性、特性,傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  6. JS魔法堂:那些困扰你的DOM集合类型

    一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...

  7. JS魔法堂:判断节点位置关系

    一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...

  8. JS魔法堂:jsDeferred源码剖析

    一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...

  9. JS魔法堂:doctype我们应该了解的基础知识

    一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...

随机推荐

  1. 解决Visual Studio 调试时候不能直接访问.json后缀文件的问题

    Web.config中作如下配置: <system.webServer> <staticContent> <mimeMap fileExtension=".js ...

  2. CSS层叠样式表的层叠是什么意思(转自知乎)

    转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...

  3. 演化理解 Android 异步加载图片

    原文:http://www.cnblogs.com/ghj1976/archive/2011/05/06/2038738.html#3018499 在学习"Android异步加载图像小结&q ...

  4. thinking in object pool

    1.背景 对象池为了避免频繁创建耗时或耗资源的大对象,事先在对象池中创建好一定数量的大对象,然后尽量复用对象池中的对象,用户用完大对象之后放回对象池. 2.问题 目前纵观主流语言的实现方式无外乎3个步 ...

  5. friend class

    友元函数与友元类.   C++中以关键字friend声明友元关系.友元可以访问与其有friend关系的类中的私有成员.友元包括友元函数和友元类.   编辑本段1.友元函数 如果在本类以外的其它地方定义 ...

  6. 谈"自驱力"

    最新说明: 1.标题是为了博眼球取的,请不大家不要纠结具体薪资数字,我瞎取的 2.请注意素质,不要满口喷粪,不要搞人身攻击,尊重别人,就是尊重你自己 3.请大家就事论事,不要胡乱臆想,请站在全局的角度 ...

  7. 物料分类账 [COML] PART 1 - 概览

    物料分类账 [COML] PART 1 - 概览 一).原理 1). •实际成本/物料分类帐是产品成本控制模块的一个子模块,产品成本控制包括三个子模块,产品成本计划,成本对象控制,实际成本/物料分类帐 ...

  8. iOS项目立项

    哎,计划总是赶不上变化,仿佛又回到了十年前高三的时候,每月.每周.每天都有计划,但是每周.每天都有计划外的因素导致了计划时时变,唯一不变的就只有变化了. 想了许久,中期计划内还是转回iOS吧,说转回其 ...

  9. 为Eclipse添加Java和Android SDK源代码

    1.添加jdk源码进入eclipse Ctrl + Click -->Attached Source 路径:D:\Program Files\Java\jdk1.8.0_45\src.zip 2 ...

  10. ITF Demo代码(用VBScript构建的接口测试框架)

    ITF Demo代码(用VBScript构建的接口测试框架) http://blog.csdn.net/testing_is_believing/article/details/20872629