仅当拖动到项目上时才禁用指针事件_仅当元素在屏幕上不可见时才滚动到可滚动div中的元素 - 腾讯云开发者社区

基础概念

指针事件（Pointer Events）是Web开发中用于处理鼠标、触摸屏等输入设备的一种事件模型。它统一了鼠标事件和触摸事件，使得开发者可以更方便地处理各种输入设备的交互。

类型

常见的指针事件包括：

pointerdown：指针按下时触发。
pointermove：指针移动时触发。
pointerup：指针抬起时触发。
pointerover：指针移动到元素上时触发。
pointerout：指针移出元素时触发。

应用场景

指针事件常用于处理用户与页面元素的交互，例如：

拖放操作
点击按钮
触摸滑动

问题描述及解决方案

问题描述

仅当拖动到项目上时才禁用指针事件。

原因

在某些情况下，我们希望用户在拖动到某个特定元素上时，无法与该元素进行交互，即禁用指针事件。

解决方案

可以通过监听pointerover和pointerout事件来实现这一功能。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disable Pointer Events on Drag</title>
    <style>
        .item {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 10px;
            display: inline-block;
        }
        .disabled {
            pointer-events: none;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="item" id="item1">Item 1</div>
    <div class="item" id="item2">Item 2</div>

    <script>
        const item1 = document.getElementById('item1');
        const item2 = document.getElementById('item2');

        let isDraggingOver = false;

        item1.addEventListener('pointerover', () => {
            isDraggingOver = true;
            item1.classList.add('disabled');
        });

        item1.addEventListener('pointerout', () => {
            isDraggingOver = false;
            item1.classList.remove('disabled');
        });

        item2.addEventListener('pointerover', () => {
            if (isDraggingOver) {
                item2.classList.add('disabled');
            }
        });

        item2.addEventListener('pointerout', () => {
            item2.classList.remove('disabled');
        });
    </script>
</body>
</html>

解释

HTML结构：创建两个div元素，分别表示两个项目。
CSS样式：定义了项目的样式，并通过.disabled类来禁用指针事件并降低透明度。
JavaScript逻辑：
- 监听item1的pointerover和pointerout事件，当鼠标移动到item1上时，设置isDraggingOver为true，并添加.disabled类；当鼠标移出item1时，设置isDraggingOver为false，并移除.disabled类。
- 监听item2的pointerover和pointerout事件，当鼠标移动到item2上且isDraggingOver为true时，添加.disabled类；当鼠标移出item2时，移除.disabled类。