CSS3 pointer-events（阻止hover、active、onclick等触发事件）

html-css07

CSS3 pointer-events（阻止hover、active、onclick等触发事件）,第1张

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持（IE11又支持，不过很好的一点是在ie中给a加disabled 点击事件自动无效。），Opera在SVG中支持。 但是 该属性HTML中 不支持

1、提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交

2、让链接不能点击

3、让鼠标点击穿透上方的 div

定义和用法

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

说明

这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF}/* 当有鼠标悬停在链接上 */

a:active {color: #0000FF} /* 被选择的链接 */

注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！

注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！

注释：Pseudo-class（伪类）的名称对大小写不敏感。

注释：伪类可与 CSS 类配合使用：

a.red:visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

如果上面这个例子中的链接已访问过，那么它会显示为红色。

PS:IE6中使用hover会有兼容性问题，推荐配合javascript使用

主要是两种方式

第一种是利用ifame,在按钮的click事件就不会影响ifame选中区域

第二种是在点击事件里面获取选中的内容进行字符串截取操作

参考http://www.haorooms.com/post/js_fwb_exec