«Невозможно прочитать свойство» className 'of null »- после прокрутки заголовков

Question

Восстанавливая проблему.

Перейти к:

http://taitems.github.io/jQuery.Gantt/

и вставьте следующий код в консоли.

Теперь нажмите на пустое место в диаграмме Ганта. Консоль выведет день, который будет нажат, и соответствующее описание.

Проблема возникает, если вы прокрутите страницу вниз, чтобы скрыть заголовки даты дня, а затем щелкните пустое пространство.

Как так

следующая ошибка вышвырнут.

jquery.fn.gantt.js:386 Uncaught TypeError: Cannot read property 'className' of null 

Что вызывает это?

Answer 1

Ошибка в jquery.fn.gantt.js:386 уже запущена в исходном lib, ваш код не сломал ее. Эта ошибка имеет какое-то отношение к document.elementFromPoint, где похоже, что lib пытается получить элемент, который «за пределами видимых границ документа или какая-либо координата отрицательна», поэтому «результат будет [null]». Ошибка вызывается, когда скрипт пытается прочитать имя класса этого нулевого значения.

Чтобы исправить эту ошибку в библиотеке, я хотел бы попробовать и просто изменить линию 384 в var col = core.elementFromPoint(e.pageX, e.pageY);

Также ..

Вы можете передать эту ошибку, отменяя слушателей библиотеки событий, и ваш код будет больше не бросайте эту ошибку. Вы должны быть в состоянии просто сделать это нравится:

$('.dataPanel').unbind('click').on('click', function(e) { 
    /* the rest of your code */ 
}); 

Тогда никакие ошибки не будут напечатаны, и ваш код будет работать:

$('.dataPanel').unbind('click').on('click', function(e) { 
    var elm = $(this); 
    $('.row.desc').children().filter(function() { 
     if ($(this).offset().top < e.pageY && ($(this).offset().top + 25) > e.pageY) { 
      console.log($(this).html()); 
     } 
    }); 
    $('.row.date').filter(function() { 
     if ($(this).offset().left < e.pageX && $(this).offset().left + 25 > e.pageX) { 
       console.log($(this).html()); 
      } 
    }); 
}); 
[<div class=​"dataPanel" style=​"width:​ 8352px;​ margin-left:​ 0px;​ height:​ 312px;​">​…​</div>​] 
Warranty Period 
    <div class="fn-label">14</div> 
Showcasing 
    <div class="fn-label">6</div> 
Development 
    <div class="fn-label">8</div> 
Scoping 
    <div class="fn-label">9</div>