TypeError无法读取未定义的属性。如何获得数据属性？

Question

我有一个简单的div，其中三个元素共享一个data-panel属性：

   <div class = 'panel' data-panel = '1'>
     <div class = "header" data-panel = '1'>Header 1 </div>
     <div class = "content" data-panel = '1'>Content</div>
   </div>

我正在尝试访问被单击的data-panel的{​​{1}}属性。我的代码：

.panel

但是，出现以下错误：

 let panels = document.getElementsByClassName('panel');
 for(panel of panels){
   panel.addEventListener('click', function(){
     let clickedDataPanel = this.data.panel; // Error
     console.log(clickedDataPanel);  // Doesn't run
     }

在此先感谢您的帮助。