重现问题。
转到:
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
是什么原因造成的?
最佳答案
错误 @ 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>
关于javascript - "Cannot read property ' className ' of null "- 滚动经过标题后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39829019/