HTML 悬浮窗拖动和点击事件

最新推荐文章于 2023-10-31 23:38:54 发布

原创最新推荐文章于 2023-10-31 23:38:54 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

本文探讨了解决HTML悬浮窗在拖动时意外触发点击事件的问题，通过调整代码逻辑实现了精准的拖动和点击区分，重点在于移动事件处理和点击区域定位的优化。

HTML 悬浮窗拖动和点击事件。

在实现过程中遇到了一个问题，拖动后会执行点击事件。

各种尝试解决，拖动后不执行点击事件解决了。

但是点击事件触发位置在悬浮窗右侧，点击事件反而很难点击了。

更换思路完美解决！

下面是代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>悬浮窗拖动点击事件</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            position: fixed;
            border-radius: 50%;
            left: calc(100% - 100px);
            background-color: red;
        }
    </style>
</head>

<body>
<div class="div" id="back-button"></div>
</body>

<script>

    window.onload = function () {
        // 标记是拖曳还是点击
        var oDiv = document.getElementById('back-button');
        var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;

        let beforeX, beforeY; // 鼠标点击的坐标

        oDiv.addEventListener('touchstart', function (e) {

            beforeX = this.offsetLeft;
            beforeY = this.offsetTop;

            e.preventDefault();
            // 阻止触摸时页面的滚动，缩放
            disX = e.touches[0].clientX - this.offsetLeft;
            disY = e.touches[0].clientY - this.offsetTop;
            // 手指按下时的坐标
            starX = e.touches[0].clientX;
            starY = e.touches[0].clientY;
        });

        oDiv.addEventListener('touchmove', function (e) {

            L = e.touches[0].clientX - disX;
            T = e.touches[0].clientY - disY; // 移动时 当前位置与起始位置之间的差值
            starXEnd = e.touches[0].clientX - starX;
            starYEnd = e.touches[0].clientY - starY;

            if (L < 0) {
                // 限制拖拽的X范围，不能拖出屏幕
                L = 0;
            } else if (L > document.documentElement.clientWidth - this.offsetWidth) {
                L = document.documentElement.clientWidth - this.offsetWidth;
            }
            if (T < 0) {
                // 限制拖拽的Y范围，不能拖出屏幕
                T = 0;
            } else if (T > document.documentElement.clientHeight - this.offsetHeight) {
                T = document.documentElement.clientHeight - this.offsetHeight;
            }
            moveX = L + 'px';
            moveY = T + 'px';
            this.style.left = moveX;
            this.style.top = moveY;
        });

        oDiv.addEventListener('touchend', function () {

            // 鼠标点击的坐标 和 抬起额坐标一致 就是点击事件
            if (beforeX === this.offsetLeft && beforeY === this.offsetTop) {
                alert('点击')
            }

        });
    }
</script>
</html>