时间戳

首页 > 解决方案 > 在 intro.js 的最后一步之后，onbeforechange 导致错误

intro.js - 在 intro.js 的最后一步之后，onbeforechange 导致错误

问题描述

我需要在加载步骤之前触发对页面的更改。（具体来说，我需要在下一步之前触发一个菜单打开；下一步将突出显示该打开的菜单。）我正在使用 introJS.onbeforechange() 来完成此操作，效果很好。在事件处理程序内部，当到达正确的步骤时，触发菜单打开。该步骤位于页面上步骤的中间。在最后一步之后，介绍在另一页继续。

在页面的最后一步，当我单击右箭头（“下一步”按钮被隐藏）时，这应该会在新页面上重新开始介绍。但取而代之的是，会产生一个错误：

intro.min.js:10 Uncaught TypeError: Cannot read property 'element' of undefined
at J.E (intro.min.js:10)
at J.L (intro.min.js:10)
at l (intro.min.js:10)

这是由 onbeforechange 处理程序的存在引起的。

这是 intro.js 中失败的代码：

if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
  continueStep = this._introBeforeChangeCallback.call(this, nextStep.element);
}

onbeforechange 里面的代码块永远不会被触发，也就是说错误是在那之前触发的。如果我删除 onbeforechange 处理程序，则不会出现此类错误。

Onbeforechange 似乎没有处理在最后一步点击右箭头，并且没有办法检测到这一点来扼杀错误。

标签： intro.js

解决方案

答案有点笨拙。我添加了一个 onchange 处理程序，当该步骤是最后一步时——用户不太可能返回触发菜单打开的步骤——我使用 this._introBeforeChangeCallback = undefined 删除了 onchange 处理程序：

    intro.onchange(function ()
    {
        // last step 
        if (this._currentStep === 9) 
        {
         this._introBeforeChangeCallback = undefined;
        }
    });

这确实意味着如果用户返回上一步，菜单将不再打开。

推荐阅读