prev 和 next 在分页中返回未定义的页码

Question

我正在尝试使用以下代码创建分页，当我单击 Prev 和 Next 链接时，我遇到了访问页码 ($clickedPageLink.dataset.page) 的问题。但是，当我单击页码1 to 5 时，我能够成功获取页码。请找到 plunker 以供参考Pagination。当单击Prev 和Next 时，console.log($clickedPageLink.dataset.page) 给出undefined。任何人都可以帮助获取Prev 和Next 的值，如html中给出的那样吗？

let prevVal = 2;
let nextVal = 3;

let str = ['<nav class="pagination">'];
str.push('<ul class="pagination__pages">');
str.push('<li class="pagination__page pagination--previous">');
str.push('<a class="pagination__link" data-page="' + (prevVal - 1) + '" href="#">');
str.push('<span><i class="fas fa-angle-left"></i> Prev</span>');
str.push('</a></li>');
for (let plengthMn = 1; plengthMn <= 5; plengthMn++) {
   str.push('<li class="pagination__page">');
   str.push('<a class="pagination__link" data-page="' + plengthMn + '" href="#">' + plengthMn + '</a>');
   str.push('</li>');
}

str.push('<li class="pagination__page pagination--next">');
str.push('<a class="pagination__link" data-page="' + (nextVal + 1) + '" href="#">');
str.push('<span>Next <i class="fas fa-angle-right"></i></span>');
str.push('</a></li>');
const $paginationList = document.getElementById('products-item_pagination');
$paginationList.innerHTML  = str.join('');

const $paginationLinkMn = document.querySelectorAll('.pagination__link');

function attachEventToElementList(elmList, event, eventHandler) {
    if(!elmList) {
        return;
    }

    elmList.forEach(function(elm) {
        elm.addEventListener(event, eventHandler);
    });
}

attachEventToElementList($paginationLinkMn, 'click', goToPageMn); 

 
   function goToPageMn(event) {
    const $clickedPageLink = event.target;
    console.log($clickedPageLink.dataset.page)

}

在我的 html 中，我有，

 <div id="products-item_pagination" class="product-pagination"></div>

Answer 1

上面代码的问题是，对于anchor tag 的事件永远不会触发，它是prev icon 的父级。下面的css hack已经解决了这个问题。

a > * {
  pointer-events: none;
}