如何获取父div数据属性javascript

我的HTML结构如下：

<div class="page" data-page-number="29" data-page-label="18" data-loaded="true" style="width: 816px; height: 1056px;">
   <div class="canvasWrapper" style="width: 816px; height: 1056px;">
      <canvas id="page29" width="1632" height="2112" style="width: 816px; height: 1056px;"></canvas>
   </div>
   <div class="textLayer" style="width: 816px; height: 1056px;">
        some content
   </div>
</div>

    <div class="page" data-page-number="29" data-page-label="18" data-loaded="true" style="width: 816px; height: 1056px;">
       <div class="canvasWrapper" style="width: 816px; height: 1056px;">
          <canvas id="page29" width="1632" height="2112" style="width: 816px; height: 1056px;"></canvas>
       </div>
       <div class="textLayer" style="width: 816px; height: 1056px;">
            some content
       </div>
    </div>

一些内容
一些内容

我想知道，当我单击任何

textLayer

类时，我将从其父

.page div

获取

数据page number=“x”

属性

这里只需要javascript解决方案

这基本上是PDF.js结构

$(".textLayer").on("click",function() {
   $(this).parent().attr("data-page-number");
});

纯js：

var classname = document.getElementsByClassName("textLayer");

var myFunction = function() {
    var attribute = this.parentElement.getAttribute("data-page-number");
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

可以使用parentNode.dataset检索父节点的数据属性

var textLayer=document.querySelector（'.textLayer'）；
textLayer.addEventListener（'click'，函数（e）{
log（'页码：'+e.target.parentNode.dataset.pageNumber）；
log（'label:'+e.target.parentNode.dataset.pageLabel）；
log（'loaded:'+e.target.parentNode.dataset.loaded）；
});

一些内容
“除非还包含框架/库的另一个标记，否则需要一个纯JavaScript答案”（当您将鼠标悬停在“JavaScript”标记上时弹出的信息）。但是如果您打算建议一个jQuery解决方案，尽管如此，您至少应该在答案中明确表示。如果您试图避免使用jQuery，您可以在此线程中检查标记的答案：querySelector仅返回第一个匹配的元素以接收所有use querySelectorAll
var elems = document.getElementsByClassName("textLayer").forEach(function(element){ 
    element.addEventListener('click', function(){
        var attribute = this.parentElement.getAttribute("data-page-number");
    }, false);
});