"Cannot read property 'className' of null " - 一旦你滚动到 headers

Question

重现问题。

转到：

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

并将以下代码粘贴到控制台中。

$('.dataPanel').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());
            }
    });
});

现在单击甘特图中的一些空白 space。控制台将输出被点击的日期和适当的描述。

一旦您向下滚动页面只是为了隐藏日期 headers 然后单击空白 space，就会出现问题

像这样

将抛出以下错误。

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

是什么原因造成的？

Answer 1

错误@ jquery.fn.gantt.js:386 已经在原始库中抛出，您的代码没有破坏它。该错误与 document.elementFromPoint 有关，看起来 lib 正在尝试获取 "outside the visible bounds of the document or either coordinate is negative" 所以 "the result [will be] null" 的元素。当脚本尝试读取此空值的 class 名称时抛出错误。

要修复库中的错误，我会尝试将第 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>

"Cannot read property 'className' of null " - 一旦你滚动到 headers

"Cannot read property 'className' of null " - Once you scroll past the headers

javascript

jquery

gantt-chart