我使用jQuery。点击来处理Raphael图形上的鼠标点击事件,同时,我需要处理鼠标拖动事件,鼠标拖动在Raphael中由鼠标下拉,鼠标上拉和鼠标移动组成。

很难区分点击和拖动,因为点击也包含鼠标下拉和鼠标上拉,我怎么能区分鼠标“点击”和鼠标“拖动”然后在Javascript?


当前回答

这应该能很好地工作。类似于已接受的答案(虽然使用jQuery),但只有当新的鼠标位置与mousedown事件上的位置不同时,isdrag标志才会重置。与公认的答案不同,这适用于最新版本的Chrome,无论鼠标是否移动,鼠标移动都会被触发。

var isDragging = false;
var startingPos = [];
$(".selector")
    .mousedown(function (evt) {
        isDragging = false;
        startingPos = [evt.pageX, evt.pageY];
    })
    .mousemove(function (evt) {
        if (!(evt.pageX === startingPos[0] && evt.pageY === startingPos[1])) {
            isDragging = true;
        }
    })
    .mouseup(function () {
        if (isDragging) {
            console.log("Drag");
        } else {
            console.log("Click");
        }
        isDragging = false;
        startingPos = [];
    });

你也可以在鼠标移动中调整坐标检查,如果你想增加一点公差(即将微小的移动视为点击,而不是拖动)。

其他回答

这应该能很好地工作。类似于已接受的答案(虽然使用jQuery),但只有当新的鼠标位置与mousedown事件上的位置不同时,isdrag标志才会重置。与公认的答案不同,这适用于最新版本的Chrome,无论鼠标是否移动,鼠标移动都会被触发。

var isDragging = false;
var startingPos = [];
$(".selector")
    .mousedown(function (evt) {
        isDragging = false;
        startingPos = [evt.pageX, evt.pageY];
    })
    .mousemove(function (evt) {
        if (!(evt.pageX === startingPos[0] && evt.pageY === startingPos[1])) {
            isDragging = true;
        }
    })
    .mouseup(function () {
        if (isDragging) {
            console.log("Drag");
        } else {
            console.log("Click");
        }
        isDragging = false;
        startingPos = [];
    });

你也可以在鼠标移动中调整坐标检查,如果你想增加一点公差(即将微小的移动视为点击,而不是拖动)。

基于这个答案,我在React组件中这样做:

export default React.memo(() => {
    const containerRef = React.useRef(null);

    React.useEffect(() => {
        document.addEventListener('mousedown', handleMouseMove);

        return () => document.removeEventListener('mousedown', handleMouseMove);
    }, []);

    const handleMouseMove = React.useCallback(() => {
        const drag = (e) => {
            console.log('mouse is moving');
        };

        const lift = (e) => {
            console.log('mouse move ended');
            window.removeEventListener('mousemove', drag);
            window.removeEventListener('mouseup', this);
        };

        window.addEventListener('mousemove', drag);
        window.addEventListener('mouseup', lift);
    }, []);

    return (
        <div style={{ width: '100vw', height: '100vh' }} ref={containerRef} />
    );
})

如果只是为了过滤掉拖动的情况,这样做:

var moved = false;
$(selector)
  .mousedown(function() {moved = false;})
  .mousemove(function() {moved = true;})
  .mouseup(function(event) {
    if (!moved) {
        // clicked without moving mouse
    }
  });

你可以这样做:

var div = document.getElementById("div"); div.addEventListener("mousedown", function() { window.addEventListener("mousemove", drag); window.addEventListener("mouseup", lift); var didDrag = false; function drag() { //when the person drags their mouse while holding the mouse button down didDrag = true; div.innerHTML = "drag" } function lift() { //when the person lifts mouse if (!didDrag) { //if the person didn't drag div.innerHTML = "click"; } else div.innerHTML = "drag"; //delete event listeners so that it doesn't keep saying drag window.removeEventListener("mousemove", drag) window.removeEventListener("mouseup", this) } }) body { outline: none; box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; overflow: hidden; } #div { /* calculating -5px for each side of border in case border-box doesn't work */ width: calc(100vw - 10px); height: calc(100vh - 10px); border: 5px solid orange; background-color: yellow; font-weight: 700; display: grid; place-items: center; user-select: none; cursor: pointer; padding: 0; margin: 0; } <html> <body> <div id="div">Click me or drag me.</div> </body> </html>

下面的编码是检测鼠标的移动。

它适用于大多数情况。这也取决于 关于如何将mouseevent处理为单击。 在JavaScript中,检测非常简单。它不关心如何 在鼠标下拉和鼠标上拉之间按住或移动。 Event.detail不会重置为1当你的鼠标移动 鼠标下拉和鼠标上拉。 如果你需要区分点击和长按,你需要 检查事件的差异。时间戳。

// ==== add the code at the begining of your coding ==== let clickStatus = 0; (() => { let screenX, screenY; document.addEventListener('mousedown', (event) => ({screenX, screenY} = event), true); document.addEventListener('mouseup', (event) => (clickStatus = Math.abs(event.screenX - screenX) + Math.abs(event.screenY - screenY) < 3), true); })(); // ==== add the code at the begining of your coding ==== $("#draggable").click(function(event) { if (clickStatus) { console.log(`click event is valid, click count: ${event.detail}`) } else { console.log(`click event is invalid`) } }) <!doctype html> <html lang="en"> <!-- coding example from https://jqueryui.com/draggable/ --> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#draggable" ).draggable(); } ); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> </body> </html>