Question

我想避免以下情况的点击和拖动功能。

我有两个DIV

包装Div

{ 宽度：400px; 高度：400像素; overflow-x：hidden; }
内容div

{ 宽度：1 200px; 身高：400px; / *注意宽度是包装div的3倍* / }

content div是包装div的子代。 wrapper div仅作为View Port，我在其中显示内容div。

当用户点击按钮时，我设置滚动位置以在包装中显示内容div的正确部分。（0-400,401-800,801-1200）但是，如果用户单击并拖动鼠标指针，则包装器div会滚动（因为拖动）。我想避免在点击和拖动时滚动。

我尝试了以下事项：

var isMouseDown = false;
function onmousedown(event) {
    isMouseDown = true;
}

function onmouseup(event) {
    isMouseDown = false;
}

function onmousemove(event) {
    if (isMouseDown) {
        event.stopPropagation();
        event.preventDefault();
        event.cancelBubble = true;
        event.returnValue = false;
        return false;
    }
}

以上代码对我没有帮助。

感谢任何帮助。

提前致谢。

Answer 1

我检查包装器div何时滚动。

我添加了事件“onscroll”，并在单击按钮时将一个全局变量“shouldScroll”设置为true，并在div滚动到所需位置时将其设置为false。

当用户点击并拖动鼠标时，包装器div滚动事件被触发但我检查“shouldScroll”是否为true然后只允许滚动，否则滚动到当前位置。

单击按钮，我将当前滚动位置设置为一个全局变量。

禁用鼠标拖动以避免滚动

1 个答案: