Atopos

1
<ul class="interactive-list">
2
  <li>列表项 1</li>
3
  <li>列表项 2</li>
4
  <li>列表项 3</li>
5
  <li>列表项 4</li>
6
  <li>列表项 5</li>
7
  <li>列表项 6</li>
8
</ul>

1
<script>
2
// 获取所有列表项
3
const listItems = document.querySelectorAll('.interactive-list li');
4

5
// 为每个列表项绑定事件
6
listItems.forEach(item => {
7
    // mouseenter 事件：鼠标进入时的效果
8
    item.addEventListener('mouseenter', function () {
9
        this.classList.add('mouse-enter');
10
        // 可选：添加提示文本（鼠标进入时显示）
11
        this.setAttribute('title', '双击可激活');
12
    }, true);
13

14
    // mouseleave 事件：鼠标离开时移除效果（增强体验）
15
    item.addEventListener('mouseleave', function () {
16
        this.classList.remove('mouse-enter');
17
    });
18

19
    // dblclick 事件：双击时的效果
20
    item.addEventListener('dblclick', function () {
21
        // 切换激活状态（点击一次激活，再点击一次取消）
22
        this.classList.toggle('dblclick-active');
23

24
        // 可选：添加点击反馈提示
25
                const span = document.createElement('span');
26
                span.style.position = 'absolute';
27
                span.color = '#1890ff';
28
                span.style.fontSize = '14px';
29
                span.textContent = this.classList.contains('dblclick-active') ? '已激活' : '已取消';
30

31
                // 获取当前列表项的位置并显示提示
32
                const rect = this.getBoundingClientRect();
33
                span.style.left = `${rect.right + 10}px`;
34
                span.style.top = `${rect.top}px`;
35
                document.body.appendChild(span);
36

37
                // 2秒后移除提示
38
                setTimeout(() => {
39
                    document.body.removeChild(span);
40
                }, 2000);
41
            }, true);
42
        });
43
</script>

1
<script>
2
    // 获取 ul 容器（只绑定这一个元素）
3
    const listContainer = document.querySelector('.interactive-list');
4

5
// 1. 监听 mouseover 事件（替代 mouseenter，支持冒泡）
6
listContainer.addEventListener('mouseenter', function (e) {
7
    // 判断触发事件的是不是 li 元素（精准匹配子元素）
8
    if (e.target.matches('.interactive-list li')) {
9
        e.target.classList.add('mouse-enter');
10
        console.log("111");
11

12
        e.target.setAttribute('title', '双击可激活');
13
    }
14
}, false);
15

16
// 2. 监听 mouseout 事件（替代 mouseleave，支持冒泡）
17
listContainer.addEventListener('mouseout', function (e) {
18
    if (e.target.matches('.interactive-list li')) {
19
        e.target.classList.remove('mouse-enter');
20
    }
21
});
22

23
// 3. 监听 dblclick 事件（支持冒泡，直接委托）
24
listContainer.addEventListener('dblclick', function (e) {
25
    if (e.target.matches('.interactive-list li')) {
26
        // 切换激活状态
27
        e.target.classList.toggle('dblclick-active');
28

29
        // 显示临时提示反馈
30
        const tip = document.createElement('span');
31
        tip.style.position = 'absolute';
32
        tip.style.color = '#1890ff';
33
        tip.style.fontSize = '14px';
34
        tip.textContent = e.target.classList.contains('dblclick-active') ? '已激活' : '已取消';
35

36
        // 定位提示到 li 右侧
37
        const rect = e.target.getBoundingClientRect();
38
        tip.style.left = `${rect.right + 10}px`;
39
        tip.style.top = `${rect.top}px`;
40
        document.body.appendChild(tip);
41

42
        // 2秒后移除提示
43
        setTimeout(() => {
44
            document.body.removeChild(tip);
45
        }, 2000);
46
    }
47
});
48
</script>