<!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. IPv6被拒如何破?-b

    APP在美国的IPv6-Only网络环境下测试不通过. 网上各种方法都试了,什么NSURLConnection, Reachability,试完还是拼人品,快要跪了 小伙伴们开始质疑这种测试方法了. ...

  2. Java实现http服务器(一)

    基于Java实现Http服务器有多种多样的方法 一种轻量级的方式是使用JDK内置的com.sun.net.httpserver包下和sun.net.httpserver包下类提供的方法构建,该方法轻便 ...

  3. GHOST备份

    整理日: 2015年2月16日 GHOST Disk2GHO STEP01 STEP02 STEP03 STEP04 STEP05 STEP06 STEP07 STEP08 STEP09 STEP10

  4. Hibernate中的一对一关系详解(1)

    A:先讲讲一对一的关系(欲知其他关系,请看下篇) a:主键关联的一对一关系 一对一关系一般用主键关联,也就是说用主键值来维护两者的关系,一个表的主键存放另一个表的主键值.例如在员工与帐号中,我们取员工 ...

  5. eclipse的使用、优化配置

    一.简介 eclipse 可谓是Java开发界的神器,基本占据了大部分的Java开发市场,而且其官方还对其他语言提供支持,如C++,Ruby,JavaScript等等.为 什么使用它?我想离不开下面的 ...

  6. [BZOJ 1086] [SCOI2005] 王室联邦 【树分块】

    题目链接:BZOJ - 1086 题目分析 这道题要求给树分块,使得每一块的大小在 [B, 3B] 之间,并且可以通过一个块外的节点(块根)使得整个块联通. 那么我们使用一种 DFS,维护一个栈,DF ...

  7. Java数据类型和MySql数据类型对应一览

    类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述             VARCHAR L+N VARCHAR java.lang.String 12   CHAR N ...

  8. Ajax的简单小例子

    1.首先下载ajax.dll,一个百度一下都有下载的!自行查找. 2.把ajax.dll导入到工程.右键工程-->添加引用--->浏览,找到下载好的ajax.dll文件,点击确定,这时候在 ...

  9. page-object使用(2)---elements

    elements就是html元素下所有的标签.用page-object你可以找到并定位html页面下绝大多数的元素,这个文章列出了可定位的这些元素,生成的方法,和依据什么关键字来找到这些元素. BUT ...

  10. Linux学习笔记25——命名管道(FIFO)

    1 命名管道(FIFO) 管道应用的一个重大缺陷就是没有名字,因此只能用于亲缘进程之间的通信.后来从管道为基础提出命名管道(named pipe,FIFO)的概念,该限制得到了克服.FIFO不同于管道 ...