<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firefox/Opera不支持onselectstart事件</title>
</head>
<body>
<div id="d1" style="width:200px;height:200px;background:gold;">
Text Text
</div>
<script type="text/javascript">
var div = document.getElementById('d1');
div.onselectstart = function() {
console.log(3);
}
</script>
</body>
</html>

当用鼠标去选定div内的文本时，IE/Safari/Chrome 的控制台输出了3，Firefox/Opera则没有输出。

1 IE可以使用onselectstart事件来阻止用户选定元素内文本，如下

<div onselectstart="return false">accc</div>

2 Firefox中可以使用CSS "-moz-user-select:none"属性来禁止文本选定

3 webkit浏览器可以使用“-khtml-user-select”，当然也可以使用方式1

可惜所有浏览器都未实现，如FF4/Safar5/Chrome11/Opera10/IE10。

这是通过CSS样式来实现的禁止用鼠标选择功能：unselectable为IE准备,onselectstart为Chrome、Safari准备,-moz-user-select是FF的 
css style:html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;}

<div unselectable="on" onselectstart="return false;" style="-moz-user-select:none;"> 
屏蔽选择的样式定义：-moz-user-select属性（只支持ff）。 
属性有三个属性值： 
1、 none：用none,子元素所有的文字都不能选择，包括input输入框中的文字也不能选择。 
2、 -moz-all：子元素所有的文字都可以被选择，但是input输入框中的文字不可以被选择。 
3、 -moz-none：子元素所有的文字都不能选择，但是input输入框中的文字除外。

禁止鼠标多次点击选中div中的文字的更多相关文章

  1. 自动选中div中的文字

    <html> <head> <title></title> <script type="text/javascript" de ...

  2. [Flex] 组件Tree系列 —— 阻止用户点击选中Tree中分支节点

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:阻止用户点击选中Tree中分支节点 ...

  3. [Flex] 组件Tree系列 —— 阻止用户点击选中Tree中任何节点

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:阻止用户点击选中Tree中任何节点 ...

  4. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  5. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  6. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  7. 实现单选框点击label标记中的文字也能选中

    实例: <label for="man"> <input type="radio" value="男" name=&quo ...

  8. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  9. JavaScript设置div中的文字滚动起来 实现滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 关于Memcache使用的工具类

    分布式缓存有它自己的好处 . 下面的 ConstValue.sessionId  是一个常量 public static readonly string sessionId = "sessi ...

  2. 手写js面向对象选项卡插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. matlab的常用快捷键

    ctrl+shift+d:控制窗口嵌入还是非嵌入

  4. 去除UINavigationBar默认透明度的方法

    UINavigationbar的属性translucent,用来控制导航条的透明度的: iOS7+版本后,navigationbar的translucent属性默认为YES,及默认带有透明度 [sel ...

  5. nutch 采集效率问题

    http://hi.baidu.com/jacklin/item/a8fbccf479f6a1d042c36a7c再附一篇:http://blog.csdn.net/laigood/article/d ...

  6. BZOJ 4010 菜肴制作

    Description 知名美食家小A被邀请至ATM 大酒店,为其品评菜肴. ATM酒店为小A准备了\(N\)道菜肴,酒店按照为菜肴预估的质量从高到低给予\(1\)到\(N\)的顺序编号,预估质量最高 ...

  7. [Quote]Creating basic Excel workbook with Open XML

    Creating basic Excel workbook with Open XML [Quote from]http://www.codeproject.com/Articles/371203/C ...

  8. 一个简单的C#获取Session、设置Session类文件

    一个简单的C#获取Session.设置Session类文件,本类主要实现大家最常用的两个功能: 1.GetSession(string name)根据session名获取session对象: 2.Se ...

  9. windows版爬取csdn

    use LWP::UserAgent; use POSIX; use HTML::TreeBuilder::XPath; use Encode; use HTML::TreeBuilder; open ...

  10. 14.6.2 Configuring InnoDB for Read-Only Operation

    14.6.2 Configuring InnoDB for Read-Only Operation 配置InnoDB只读操作 你可以查询InnoDB 表MySQL 数据目录是一个只读介质,通过启用 - ...