<!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. mp4下载完后才能播放的问题

    下载完后才能播放的问题.mp4视频有metadata,通常在文件尾部,而flash读到这个metadata才开始播放,解决办法是用工具处理一下mp4,把它的metadata移至文件头部. 推荐工具:m ...

  2. JSP中使用的模式——JSP+Servlet+JavaBean

    上一篇博文写到模式一:JSP+JavaBean 链接地址:http://wxmimperio.coding.io/?p=155 JSP中两种模式的总结 链接地址:http://wxmimperio.c ...

  3. JSP中使用的模式——JSP+JavaBean

    模式二:JSP+Servlet+JavaBean 链接地址:http://wxmimperio.coding.io/?p=189 JSP中两种模式的总结 链接地址:http://wxmimperio. ...

  4. C#与C++的几个不同之处知识点

    1.索引器 索引器是C#自创的内容,这是C++当中没有的内容,所以做一次笔记. 索引器是用于书写一个可以通过使用[]想数组一样直接访问集合元素的方法.我们只需要指定待访问实例或元素的索引.索引器的语法 ...

  5. jQuery中的data方法:

    向元素附加数据,然后取回该数据: $("#btn1").click(function(){ $("div").data("greeting" ...

  6. ZOOKEEPER在CENTOS6上的再安装

    作DUBBO时,肯定是需要的,,对的,,DUBBO也要熟悉一下才行啦.. URL: http://www.centoscn.com/CentosServer/test/2015/0120/4531.h ...

  7. mac下的改装人生——关于mc700安装双硬盘以后的win重装问题

    宝贝到家~玩了几天,感觉神清气爽~今天正式开始准备工作了哈. 今天早上开了mac的win7系统发现了几个小问题.好吧我承认这个真的是小问题,就是我没有办法能调整屏幕的亮度了.重装了bootcamp依然 ...

  8. Web服务器性能/压力测试工具http_load、webbench、ab、Siege使用教程 - VPS侦探

    Web服务器性能/压力测试工具http_load.webbench.ab.Siege使用教程 - VPS侦探 http://soft.vpser.net/test/http_load/http_loa ...

  9. .\Obj\main.axf: Error: L6406E: No space in execution regions with .ANY selector matching sin_i.o(.co

    这个问题原因是 芯片的 空间不足 解决方法是  在KEIL 的DEVICE中选择 更大的空间的芯片型号

  10. mysql 导出，导入数据

     导出     加-d代表只导出表结构 命令行下具体用法如下:  mysqldump -u用户名 -p密码 -d 數據库名 表名 脚本名; 1.导出数据库为dbname的表结构(其中用户名为root, ...