"nullのプロパティ 'className'を読み取れません - 一度ヘッダーをスクロールします。

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が元のlibに既にスローされていますが、コードで破られていません。そのエラーは、libが "ドキュメントの可視範囲外かどちらかの座標が負である"という要素を取得しようとしているように見えるので、結果はnullになります。document.elementFromPointと何か関係があります。この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> 

それが好きですかあなたは簡単にできるはずです