今天我们说说有关网站制作过程中是如何通过css设置来禁用鼠标事件，禁用鼠标事件我们会用到pointer-events属性，pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。

　　例如，一个连接如果设置了.disabled { pointer-events: none; }，样式就无法点击了。是不是很神奇哪？下面我们再来看看详细的pointer-events介绍。希望大家阅读完这篇文章后可以有所收获。

pointer-events属性是什么？

　　pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。pointer-events 属性有很多值，但是对于浏览器来说，适用于 HTML 元素的只有三个值，其它的几个值都是针对 SVG 元素的（本身这个属性就来自于 SVG 技术，是一个 SVG 属性，目前在CSS规范中没有找到其定义）。

属性值介绍

pointer-events 属性值

    auto | none | inherit => HTMLvisiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all => SVG

针对HTML元素

    none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获)。

    auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。对于 SVG 内容，该值与 visiblePainted 效果相同。

    inherit：将使用 pointer-events 元素的父级的值。

　　注意：使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标。

针对 svg 元素（ visibility、fill、stroke属性）

    visiblePainted：该属性值等价于 auto ； 当 svg 中的某个元素可见，并且当其 fill 不是 none 时，指针在fill区域，该事件能够被捕捉到，当其 stroke 不是 none 时，stroke 目标事件能够被捕捉，visibility 为 hidden 事件不可捕获。

    visibleFill：fill属性的值不会影响事件处理，fill 区域都能捕获事件目标；visibility 为 hidden事件不可捕获。

    visibleStroke：stroke属性的值不会影响事件处理，stroke区域都能捕获事件目标；visibility为hidden事件不可捕获。

    visible：fill 和 stroke 属性的值均不会影响事件处理， visibility 为 hidden 事件不可捕获。

    painted：当其 fill 不是 none 时，指针在fill区域，该事件能够被捕捉到，当其 stroke 不是 none 时，stroke 目标事件能够被捕捉到， visibility 对事件处理无影响。

    fill：fill、visibility 属性的值均不会影响事件处理，fill 区域都能捕获事件目标。

    stroke：stroke、visibility 属性的值均不会影响事件处理，fill 区域都能捕获事件目标。

    all：所有区域事件处理均可捕获


　　关于“css如何使用禁用鼠标事件”这篇文章就分享到这里了，更多网站制作小知识关注诚企，我们一起来探讨学习吧。www.city86.com

更多网站制作小知识请关注青岛诚企建站，http://www.city86.com 或者微信扫码在线沟通。青岛诚企建站，专业网站制作，程序开发，网页设计。

本文地址：http://www.city86.com/news_view_522/