13

Вопрос по canvas, html5, javascript – HTML5 Canvas: как обрабатывать мышиный клик мышью

Я играл с html5 canvas и столкнулся с проблемой.

canvas.onmousedown = function(e){
        dragOffset.x = e.x - mainLayer.trans.x;
        dragOffset.y = e.y - mainLayer.trans.y;
        canvas.onmousemove = mouseMove;
}
canvas.onmouseup = function(e){
    canvas.onmousemove = null;
}

canvas.onmouseclick = mouseClick;

function mouseMove(e){
    mainLayer.trans.x = e.x - dragOffset.x;
    mainLayer.trans.y = e.y - dragOffset.y;
    return false;
}

function mouseClick(e){
    // click action
}

В этом коде я делаю щелчок мышью + перетаскиваю панораму вида холста, переводя его по смещению Но у меня также есть событие клика. Прямо сейчас, когда я перетаскиваю свою мышь и отпускаю, она запускается как onmouseup И onclick.

Существуют ли методы, которые делают их уникальными?

  • 0

    Попробуйте объявить переменную, такую как

    clickStatus = 0; и в начале каждой функции проверяйте правильность значения.

    if (clickstatus == 0) {
         clickstatus =1;
         ...//function code
     };
    

  • 14

    click 

    событие происходит после успешногоmousedown а такжеmouseup на элементе. Есть ли какая-то конкретная причина, по которой вы используете;поверх событий мыши? Вы должны быть в порядке с простоmousedown/mouseup, ;это удобное событие, которое экономит вам немного кода.

    Я бы вообще сделал это так:

    var mouseIsDown = false;
    
    canvas.onmousedown = function(e){
        dragOffset.x = e.x - mainLayer.trans.x;
        dragOffset.y = e.y - mainLayer.trans.y;
    
        mouseIsDown = true;
    }
    canvas.onmouseup = function(e){
        if(mouseIsDown) mouseClick(e);
    
        mouseIsDown = false;
    }
    
    canvas.onmousemove = function(e){
        if(!mouseIsDown) return;
    
        mainLayer.trans.x = e.x - dragOffset.x;
        mainLayer.trans.y = e.y - dragOffset.y;
        return false;
    }
    
    function mouseClick(e){
        // click action
    }
    

  • 0

    в функции mouse move установите логическое значение

    чтобы сказать, что произошло движение, охватите весь код в mouseup и щелкните оператором if, чтобы проверить, что перетаскивание не произошло. После этих операторов if и до конца функций установите логическое значение перетаскивания в false.