javascript - "Cannot read property ' className ' of null "- 滚动经过标题后

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

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

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

像这样

将抛出以下错误。

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

是什么原因造成的？

Answer 1

错误 @ jquery.fn.gantt.js:386 已经在原始库中抛出，您的代码没有破坏它。该错误与 document.elementFromPoint 有关。看起来 lib 正在尝试获取“在文档的可见边界之外或任一坐标为负”的元素，因此“结果[将是] null”。当脚本尝试读取此空值的类名时，会引发错误。

要修复库中的该错误，我会尝试将第 384 行更改为 var col = core.elementFromPoint(e.pageX, e.pageY);

还有..

您可以通过取消绑定(bind)库事件监听器来绕过此错误，并且您的代码将不再抛出此错误。您应该能够简单地执行以下操作:

$('.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>