如何使SFDC嵌入式聊天组件可拖拽且不触发点击事件？

问题核心是拖拽操作结束后，mouseup会触发组件自带的点击事件，导致聊天窗口意外激活。解决思路是区分拖拽与纯点击操作，仅在未发生拖拽时允许点击事件生效。

具体实现方案 #

1. 添加状态变量标记是否发生拖拽
2. 在拖拽过程中检测鼠标移动距离，超过阈值则标记为拖拽状态
3. 在鼠标松开时，若判定为拖拽操作，临时拦截并阻止后续的点击事件

修改后的代码 #

const widgetObserver = new MutationObserver((mutations, observer) => {
    const helpButton = document.querySelector('chat-widget');

    if (helpButton) {
        !helpButton.draggable && enableDragging(helpButton);
        observer.disconnect();
    }
});

function enableDragging(element) {
    let displacedX = 0,
        displacedY = 0,
        currentX = 0,
        currentY = 0;
    let isDragging = false;
    // 拖拽阈值：鼠标移动超过这个距离才判定为拖拽
    const DRAG_THRESHOLD = 2;

    element.onmousedown = dragMouseDown;
    element.style.right = currentX + 'px';
    element.style.bottom = currentY + 'px';
    element.draggable = true;

    function dragMouseDown(e) {
        e = e || window.event;
        // 重置拖拽状态
        isDragging = false;
        // 记录初始鼠标位置
        const startX = e.clientX;
        const startY = e.clientY;

        document.onmouseup = (upEvent) => closeDragElement(upEvent, startX, startY);
        document.onmousemove = (moveEvent) => elementDrag(moveEvent, startX, startY);
    }

    function elementDrag(e, startX, startY) {
        e.preventDefault();
        // 计算鼠标移动距离
        const moveX = Math.abs(e.clientX - startX);
        const moveY = Math.abs(e.clientY - startY);
        // 超过阈值则标记为拖拽状态
        if (moveX > DRAG_THRESHOLD || moveY > DRAG_THRESHOLD) {
            isDragging = true;
        }

        displacedX = currentX - e.clientX;
        displacedY = currentY - e.clientY;
        currentX = e.clientX;
        currentY = e.clientY;
        element.style.top = element.offsetTop - displacedY + 'px';
        element.style.left = element.offsetLeft - displacedX + 'px';
    }

    function closeDragElement(e, startX, startY) {
        document.onmouseup = null;
        document.onmousemove = null;

        if (isDragging) {
            // 临时添加点击事件拦截器，阻止一次点击事件
            const handleClick = (clickEvent) => {
                clickEvent.stopPropagation();
                clickEvent.preventDefault();
                // 拦截后移除该事件监听器，不影响后续正常点击
                element.removeEventListener('click', handleClick);
            };
            element.addEventListener('click', handleClick, { once: true });
        }
    }
}

关键逻辑说明 #

• DRAG_THRESHOLD：设置微小阈值（2px），避免因鼠标轻微抖动被误判为拖拽
• isDragging：在鼠标移动超过阈值后标记为true，区分拖拽和纯点击
• 一次性点击拦截器：仅在拖拽结束后阻止一次点击事件，不影响后续用户主动点击组件的操作

内容的提问来源于stack exchange，提问作者Neo Chee Kiong