“无法读取 null 的属性 'className'” - 滚动浏览标题后答案

【问题标题】："Cannot read property 'className' of null " - Once you scroll past the headers“无法读取 null 的属性 'className'” - 滚动浏览标题后
【发布时间】：2016-10-03 10:01:33
【问题描述】：

重现问题。

转到：

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());
            }
    });
});

现在点击甘特图中的一些空白区域。控制台会输出被点击的日期和相应的描述。

当您向下滚动页面只是为了隐藏日期标题然后单击空白区域时，就会出现问题。

像这样

以下错误将被抛出。

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

是什么原因造成的？

【问题讨论】：

标签： javascript jquery gantt-chart

【解决方案1】：

错误@jquery.fn.gantt.js:386 已经在原始库中抛出，您的代码没有破坏它。该错误与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>

【讨论】：