pointer-events 属性定义元素是否对指针事件做出反应

属性:

    auto—效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
    none—元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

JavaScript 语法：object.style.pointerEvents="none"


属性值

描述

auto

默认值。元素对指针事件做出反应，比如 :hover 和 click。

none

元素不对指针事件做出反应。

initial

将此属性设置为其默认值。参阅 ​​initial​​。

inherit

从其父元素继承此属性。参阅 ​​inherit​​。

鼠标禁用


  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止CSS里的 hover 和 active 状态的变化触发事件
  • 阻止JavaScript点击动作触发的事件


cursor:not-allowed;//MDN解释：不能执行

cursor:no-drop;// MDN解释：当前位置不能扔下 Windows或Mac OS X中 "no-drop 与not-allowed相同". 


案例-​​在线测试​​ 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>pointer-events</title>
    <style type="text/css">
      div.ex1 {
        pointer-events: none;

        /* cursor: default; */
        cursor:not-allowed;
        opacity: 0.6;
      }

      div.ex2 {
        pointer-events: auto;
      }
    </style>
  </head>
  <body>
    <h1>pointer-events 属性</h1>

    <p>请把鼠标指针移至下面的链接，查看是否对指针事件做出反应：</p>
    <code>
      cursor:not-allowed;//MDN解释：不能执行<br>
      cursor:no-drop;// MDN解释：当前位置不能扔下   Windows或Mac OS X中 "no-drop 与not-allowed相同".
    </code>

    <h2>pointer-events: none：</h2>
    <div class="ex1">访问 <a href="https://jackiehao.blog.csdn.net/">教程</a></div>

    <h2>pointer-events: auto（默认）</h2>
    <div class="ex2">访问 <a href="https://jackiedyh.github.io/">博客</a></div>
  </body>
</html>