pointer-events: auto；是一个 CSS 属性，

最新推荐文章于 2024-09-05 23:48:57 发布

GIS瞧葩菜

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量158

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/this__valve/article/details/141940145

版权

pointer-events: auto; 是一个 CSS 属性，用于控制一个元素是否可以成为鼠标事件（如点击、悬停、拖动等）的目标。以下是对 pointer-events 属性及其值的详细解释：

`pointer-events` 属性

定义: pointer-events 属性控制如何处理鼠标事件。它可以用于控制元素是否响应鼠标事件以及如何处理事件。

`pointer-events: auto;`

auto: 这是 pointer-events 的默认值，意味着元素会响应所有正常的鼠标事件。例如，用户可以点击、拖动或悬停在这个元素上，且事件会被传递给该元素。

使用场景

默认行为:
- 使用 pointer-events: auto; 是为了恢复元素的默认鼠标事件行为。这在您之前可能设置过 pointer-events: none;（使元素不可点击）之后恢复正常交互时特别有用。
元素层叠:
- 在处理复杂的层叠布局时，pointer-events 可以帮助控制鼠标事件的传递。比如，如果有一个透明的覆盖层，设置为 pointer-events: none; 可以确保下层元素仍然响应鼠标事件。
动态交互:
- 有时在 JavaScript 中动态更改 pointer-events 属性是很有用的。例如，您可以在某些条件下使某些元素变得不可点击或只在特定情况下才响应事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pointer Events Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid blue;
        }
        .box.disabled {
            pointer-events: none;
            background-color: lightgray;
        }
        .box.enabled {
            pointer-events: auto;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box enabled" id="myBox">Click Me</div>
    <button onclick="togglePointerEvents()">Toggle Pointer Events</button>

    <script>
        function togglePointerEvents() {
            const box = document.getElementById('myBox');
            if (box.classList.contains('enabled')) {
                box.classList.remove('enabled');
                box.classList.add('disabled');
            } else {
                box.classList.remove('disabled');
                box.classList.add('enabled');
            }
        }
    </script>
</body>
</html>

说明

在上面的示例中，box 元素的 pointer-events 属性可以通过点击按钮进行切换。当 pointer-events 被设置为 none 时，元素不会响应任何鼠标事件；当它被设置为 auto 时，元素会正常响应鼠标事件。

例子

 let htmlmodel = `
      <div  onclick='chickModelCom(${JSON.stringify(model)})'  style='cursor:pointer;pointer-events:auto;z-index: 99;font-size: 10px;color: #fff; display: inline-block; text-align: center;'>
      <div style='width:124px;height:30px;line-height: 30px; background-image: url(${back});background-repeat: no-repeat;background-size: 100% 100%; '>
      ${model.name} -:${model.speed}m/s
      </div>
      <div style='width: 20px; padding-top:20px; margin-left:49px; margin-top:12px; background-image: url(${modelPoint});background-repeat: no-repeat;'>
      </div>
      </div>
      `

没有加点击失败哦，有时候。