该文章基于 Butterfly的魔改教程：右键菜单 | 爱吃肉的猫 操作而来。

在新建的rightmenu.js 中调用函数启用监听事件。

1
addRightMenuClickEvent();

使用Butterfly主题并开启Pjax时，在页面切换后右键菜单的监听事件函数会失效。这里并不建议关闭Pjax。

根据Butterfly官方文档描述

  • Pjax优点

    當用户點擊鏈接，通過 ajax 更新頁面需要變化的部分，然後使用 HTML5 的 pushState 修改瀏覽器的 URL 地址。
    這樣可以不用重複加載相同的資源（css/js）， 從而提升網頁的加載速度。

  • Pjax缺点

    使用 pjax 後，一些自己 DIY 的 js 可能會無效，跳轉頁面時需要重新調用，請參考 Pjax 文檔
    使用 pjax 後，一些個別頁面加載的 js/css，將會改為所有頁面都加載。

这里根据 Pjax 文檔 来对页面添加监听事件来重新调用函数即可。

1
2
3
4
5
6
// 监听 pjax 页面跳转成功事件
document.addEventListener('pjax:success', function () {
  console.log('Pjax: New content loaded successfully');
  // 页面加载完成后执行操作，例如重新初始化插件
  addRightMenuClickEvent();
})