1

Верстаю таблицу ячеек как у экселя. Сейчас делаю выделение диапазона ячеек. Проблема заключается в тому, что при зажимании ЛКМ (левую кнопку мыши) у нас mouseDown = trueи при наведении .hover() на ячейку срабатывает функция selectRange(id) которая визуально выделяет наш диапазон. По задумке при .mouseup() у нас mouseDown = false и тогда функция не будет выделять диапазон, но selectRange() не прекращает работу и когда мы отпускаем ЛКМ при наведении все равно выделяет новый диапазон.

select range

$('.default')
        .mousedown(function(){
            mouseDown = true;
            var id = $(this).attr('id');
            var address = id.slice(8,id.length);
            //select range
            startSelectCell = address;
            selectRange(id);
        })
        .mouseup(function(){
            mouseDown = false;
        })
        .hover(function(){
            var id = $(this).attr('id');
            if (mouseDown == true) selectRange(id);
        });
function selectRange(id) {
    if (mouseDown == true) {
        var address = id.slice(8,id.length);
        var position = $('#sheet1__'+startSelectCell).position();
        var positionAddress = $('#sheet1__'+address).position();
        var width = positionAddress.left - position.left + cellWidth;
        var height = positionAddress.top - position.top + cellHeight;
        //if (width < 0) positive(width);
        //if (height < 0) positive(height);
        $('.table__select').css({
            display : 'block',
            left : position.left,
            top : position.top,
            width: width,
            height: height
        });
    }
}

2 ответа 2

1

Непонятно где определён mouseDown - это необходимо сделать явным образом. Далее, проверьте, cрабатывает ли mouseup и лучше использовать глобальные обработчики на document или внешнем контейнере с ручным управлением подпиской, а в третьих - выделить обработчик в отдельную функцию, подписывая hover по mousedown. Простой пример:

  $(document).mousedown(function() {
      $(".node").bind('mouseover',function(){
          $(this).css({background:"#333333"});
      });
  })
  .mouseup(function() {
    $(".node").unbind('mouseover');
  });

  $('.node').mousedown(function() {
    $(this).css({background:"#333333"});
  });

лучше использовать именованые функции. Всё, вместе с mouseDown, поместить в кложуру.

3
  • 11111000000 ,что значит поместить в кложуру?
    – spectre_it
    28 апр 2016 в 11:33
  • @stas.t, в closure
    – MasterAlex
    28 апр 2016 в 11:37
  • (function () { ... })() 28 апр 2016 в 15:58
0

Не знаю на сколько правильно я поступаю (с точки зрения чистоты и правильности написания кода). Я еще зелёный в js, но ответ @11111000000 подтолкнул меня на такое решение:

$(document).mouseup(function(){
        mouseDown = false;
    });

1
  • если это работает, то и хорошо. А в плане стиля и чистоты кода, хороший гайд тут: github.com/uprock/javascript 29 апр 2016 в 4:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.