我如何知道何时选择了新的 (Spry) 手风琴选项卡（类似于“点击”）？ 我想附上我自己的行为

Question

我有一个手风琴设置来处理注册。 当用户单击不同的面板选项卡时，我想验证在每个面板上输入的数据。 我在每个面板上都有一个继续按钮，当用户使用它进入下一个面板时，我能够验证我内心的内容。

我的问题是他们也可以独立单击手风琴选项卡（我希望他们能够跳过以进行编辑），但我也想验证这些事件。

我已经做了一堆搜索，但没有找到满意的答案。 我对 Javascript 还很陌生，对 jQuery 也很陌生，所以如果你有给我的代码片段，请彻底解释它们。

这应该是一个简单的问题（类似于on-click等）。 我很惊讶也很沮丧，我还没有找到答案。

编辑：
埃里克，我无法让它发挥作用。 这是我的版本。 我把它放在头部部分。 我在那里有一些测试代码，这些代码过去对我来说很可靠（更改其中一个选项卡上的标签）。 我假设这段代码对你有用？ 不管怎样，谢谢你的帮助，我希望我们已经足够了解对方。

// add capability to detect when accordion tab has been clicked

RegFormAccordion.addEventListener('click', function(e){
    var btnElement;

    (function findAccordionButton(el){

        //e.target is the original element actually clicked on
        //the event bubbles up to ancestor/parent nodes which is why you can listen at
        //the container

        if(!btnElement){ btnElement = e.target; }
        else { btnElement = el; }

        if(e.target.className !== 'accordionBtn')
        {
            findAccordionButton(btnElement.parentNode);
        }
        else
    {
        var curr_panel_index = RegFormAccordion.getCurrentPanelIndex();

            document.getElementById("verify-reg-panel-label").innerHTML = "Index = " + curr_panel_index; // test code to see if it's even getting here

        if (curr_panel_index == 1) // contact section
            {
        ValidateContact();
        }
        else if (curr_panel_index == 2) // payment section
        {
        ValidatePayment();
        }
        UpdateVerifyPanel(); // update contents of verification panel
    }
    })()

} );

Answer 1

事件委托。

someAccordianContainer.addEventListener('click', function(e){
    var btnElement;

    (function findAccordionButton(el){

        //e.target is the original element actually clicked on
        //the event bubbles up to ancestor/parent nodes which is why you can listen at
        //the container

        if(!btnElement){ btnElement = e.target; }
        else { btnElement = el; }

        if(e.target.className !== 'accordionBtn'){
            findAccordionButton(btnElement.parentNode);
        }
        else { doSomething(btnElement); }
    })()

} );

但是，如果您支持较旧的浏览器，则必须针对 IE<=8 进行标准化，因为它使用专有的 attachEvent 方法。 点击 quirksmode.org 了解详细信息，或者只使用 jQuery 或 MooTools 之类的工具。

Answer 2

好的。 我找到了 SpryAccordion.js 用来打开新面板的函数并添加了我自己的代码。 简单而优雅。 这不是我通常会做的事情（通常我会单独留下“图书馆”）。 但是如果你让它可编辑而不给我另一种方式来获得所需的控制，那么黑客就会发生。

如果我需要在我网站上的其他地方使用另一个手风琴，我将不得不在调用 hack 之前仔细检查我有正确的手风琴。 我愿意做出的权衡。 它现在完美地工作。 这是代码：

Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)

{

var panelA = this.currentPanel;
var panelB;

if (typeof elementOrIndex == "number")
    panelB = this.getPanels()[elementOrIndex];
else
    panelB = this.getElement(elementOrIndex);

if (!panelB || panelA == panelB)    
    return null;

// Start Becca's code
var panelIndex = this.getPanelIndex(panelA);
if (panelIndex == 1) // contact info panel
{
   if (ValidateContact())
      UpdateVerifyPanel();
       else
      return null;
}
else if (panelIndex == 2) // payment info panel
{
   if (ValidatePayment())
      UpdateVerifyPanel();
   else
      return null;
}
// End Becca's code

var contentA = panelA ? this.getPanelContent(panelA) : null;
var contentB = this.getPanelContent(panelB);

…………

};

是的，我想要的只是对面板选项卡的控制与我对自己的用户定义按钮的控制相同，以确保我可以在继续之前进行验证，并在用户进行任何编辑后更新我的验证屏幕，而不仅仅是他们碰巧点击了我的继续按钮。 我是一个快乐的露营者。 很高兴我请了几天假。

我希望这有助于人们更好地控制自己的手风琴。 很高兴我不必在 jQuery 上进行速成课程，而我现在想要的只是让我的网站正常运行。