`
ch_kexin
  • 浏览: 876922 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

禁止鼠标多次点击选中div中的文字

    博客分类:
  • HTMl
 
阅读更多

<!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输入框中的文字除外。

 

分享到:
评论

相关推荐

    《程序天下:JavaScript实例自学手册》光盘源码

    3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最...

    程序天下:JavaScript实例自学手册

    3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最...

    前端css+html+布局笔记

    h1的重要性仅次于title,浏览器也会主要检索h1中的内容,以判断页面的主要内容 一般一个页面中只能写一个h1 段落标签 换行标签 水平线标签 内联框架 可以向一个页面中引入其他的外部页面 ...

    delphi 开发经验技巧宝典源码

    0034 在Delphi中禁止使用result 24 0035 如何在Delphi中录制代码 24 0036 如何编译器会提示数组太大时的处理技巧 25 0037 如何对超大数字进行计算 25 0038 强类型的定义及使用 25 2.2 类、函数、重载 25...

    delphi 开发经验技巧宝典源码06

    0034 在Delphi中禁止使用result 24 0035 如何在Delphi中录制代码 24 0036 如何编译器会提示数组太大时的处理技巧 25 0037 如何对超大数字进行计算 25 0038 强类型的定义及使用 25 2.2 类、函数、重载 25...

    易语言程序免安装版下载

    修改BUG:超级列表框在属性“整行选择”为真时,鼠标单击第一列右面也会导致第一列中的选择框被选中或取消选中。 21. 修改BUG:Sqlite3数据库支持库中“Sqlite数据库.取错误文本()”返回的文本是UTF-8编码(应是GB...

    excel的使用

    输入完毕之后,再次按下键盘上的Ctrl键,然后使用鼠标左键单击所选择的多个工作表,解除这些工作表的联系,否则在一张表单中输入的数据会接着出现在选中的其它工作表内。(6) 不连续单元格填充同一数据选中一个...

    javascript函数的解释

    31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE) 32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack-&gt;AutoPostBack, Event PostBack-&gt;EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...

    jQuery详细教程

    $("div#intro .head") id="intro" 的 &lt;div&gt; 元素中的所有 class="head" 的元素 三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语...

    ExtAspNet_v2.3.2_dll

    -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack-&gt;AutoPostBack, Event PostBack-&gt;EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...

    sublime快捷键

    5在鼠标光标处按快捷键ctrl+d,将会选择光标所在标签范围内的所有内容,多次运行将扩大选择。有扩大就有缩小,快捷键:crtl+shift+d,多次运行将缩小选择范围。 6数字递增/递减,快捷键分别是:ctrl+up/down、alt+up/...

    js实现仿Discuz文本框弹出层效果

    这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字、图片、表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的...

    JavaScript完全自学宝典 源代码

    8.9.html 多次打开输出流的效果。 8.10.html 使用write()方法生成页面。 8.11.html 使用writeln()方法生成文本并换行。 第9章(\c09) 示例描述:学习JavaScript中的window对象。 9.1.html 控制...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    书中实例来源于多位工程师的多年积累,具有很强的实用性。 本书是第I卷,以开发人员在项目开发中经常遇到的问题和必须掌握的技术为中心,介绍了应用PHP进行Web开发的各个方面的知识和技巧,主要包括开发环境、PHP...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    书中实例来源于多位工程师的多年积累,具有很强的实用性。 本书是第I卷,以开发人员在项目开发中经常遇到的问题和必须掌握的技术为中心,介绍了应用PHP进行Web开发的各个方面的知识和技巧,主要包括开发环境、PHP...

Global site tag (gtag.js) - Google Analytics