Javascript 最小形式返回按钮数量干扰_Javascript_Jquery_Css

Javascript 最小形式返回按钮数量干扰

javascript jquery css

Javascript 最小形式返回按钮数量干扰,javascript,jquery,css,Javascript,Jquery,Css,我在菜单上添加了一个后退按钮这是我网站上的一个表单，它已经实现了表单问题是，如果用户快速按下后退按钮（针对上一个问题），则问号计数器重叠，最终看起来数字混淆有人能帮忙吗下面的全文和片段是主要关注点 .simform.number{ 位置：绝对位置；右：0；溢出：隐藏；保证金：0.4em0；宽度：3em；字号：700；字号：0.4em； } .simform.编号：后{ 位置：绝对位置；左：50%；内容：“/”；不透明度：0.4； -webkit转换：translate

我在菜单上添加了一个后退按钮

这是我网站上的一个表单，它已经实现了表单

问题是，如果用户快速按下后退按钮（针对上一个问题），则问号计数器重叠，最终看起来数字混淆

有人能帮忙吗

下面的全文和片段是主要关注点

.simform.number{
位置：绝对位置；
右：0；
溢出：隐藏；
保证金：0.4em0；
宽度：3em；
字号：700；
字号：0.4em；
}
.simform.编号：后{
位置：绝对位置；
左：50%；
内容：“/”；
不透明度：0.4；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}
.simform.number span{
浮动：对；
宽度：40%；
文本对齐：居中；
}
.simform.number.当前编号{
浮动：左；
}
.simform.下一个号码{
位置：绝对位置；
左：0；
}
.simform.show-next.当前编号{
-webkit转换：-webkit转换0.4s；
转变：转变0.4s；
-webkit转换：translateY（-100%）；
转换：translateY（-100%）；
}
.simform.show-next.number next{
-webkit动画：从上向下移动0.4s；
动画：从上向下移动0.4s；
}
.simform.show-previous.number当前{
-webkit转换：-webkit转换0.4s；
转变：转变0.4s；
-webkit转换：translateY（100%）；
转化：translateY（100%）；
}
.simform.show-previous.number next{
-webkit动画：从上向下移动0.4s；
动画：从上向下移动0.4s；
}

修复程序：

a） 275号线附近的变更路段：

// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {

    if (this.nextQuestionNum) this.questionStatus.removeChild( this.nextQuestionNum ); // remove if it still exists (when user clicks forwards or back before animation ends)
    this.nextQuestionNum = document.createElement( 'span' );

    this.nextQuestionNum.className = 'number-next';
    this.nextQuestionNum.innerHTML = Number( this.current + 1 );
    // insert it in the DOM
    this.questionStatus.appendChild( this.nextQuestionNum );
};

b） 195号线附近的变更路段：

    // after animation ends, remove class "show-next" from form element and change current question placeholder
    var self = this,
        onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            if( self.isFilled ) {
                self._submit();
            }
            else {
                classie.removeClass( self.el, 'show-next' );
                self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
                self.questionStatus.removeChild( self.nextQuestionNum );
                self.nextQuestionNum = null; // set to null to indicate that it has been removed

                // force the focus on the next input
                nextQuestion.querySelector( 'input' ).focus();
            }
        };

b）第257号线附近的变更路段：

    // after animation ends, remove class "show-previous" from form element and change current question placeholder
    var self = this,
        onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            if( self.isFilled ) {
                self._submit();
            }
            else {
                classie.removeClass( self.el, 'show-previous' );
                self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
                self.questionStatus.removeChild( self.nextQuestionNum );
                self.nextQuestionNum = null; // set to null to indicate that it has been removed

                // force the focus on the next input
                previousQuestion.querySelector( 'input' ).focus();
            }
        };

解释：

问题在于这一部分：

// changes the current question number
    stepsForm.prototype._updateQuestionNumber = function() {
        // first, create next question number placeholder
        this.nextQuestionNum = document.createElement( 'span' );
        this.nextQuestionNum.className = 'number-next';
        this.nextQuestionNum.innerHTML = Number( this.current + 1 );
        // insert it in the DOM
        this.questionStatus.appendChild( this.nextQuestionNum );
    };

具体来说，行

this.nextQuestionNum=document.createElement（'span'）
它创建span
并保存对它的引用（this.nextQuestionNum
）。动画完成后，将使用该引用销毁该元素
当用户点击过快（即，比动画运行快）时，上述代码会再次执行，从而创建一个新的span
，并保留对该代码的引用。此时，如果原始span
未被删除，则代码将丢失指向它的指针，并像臭味一样挂起
因此，if
语句检查它是否为null并将其删除。
修复：
a） 275号线附近的变更路段：
// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {

    if (this.nextQuestionNum) this.questionStatus.removeChild( this.nextQuestionNum ); // remove if it still exists (when user clicks forwards or back before animation ends)
    this.nextQuestionNum = document.createElement( 'span' );

    this.nextQuestionNum.className = 'number-next';
    this.nextQuestionNum.innerHTML = Number( this.current + 1 );
    // insert it in the DOM
    this.questionStatus.appendChild( this.nextQuestionNum );
};

b） 195号线附近的变更路段：
    // after animation ends, remove class "show-next" from form element and change current question placeholder
    var self = this,
        onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            if( self.isFilled ) {
                self._submit();
            }
            else {
                classie.removeClass( self.el, 'show-next' );
                self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
                self.questionStatus.removeChild( self.nextQuestionNum );
                self.nextQuestionNum = null; // set to null to indicate that it has been removed

                // force the focus on the next input
                nextQuestion.querySelector( 'input' ).focus();
            }
        };

b） 第257号线附近的变更路段：
    // after animation ends, remove class "show-previous" from form element and change current question placeholder
    var self = this,
        onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            if( self.isFilled ) {
                self._submit();
            }
            else {
                classie.removeClass( self.el, 'show-previous' );
                self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
                self.questionStatus.removeChild( self.nextQuestionNum );
                self.nextQuestionNum = null; // set to null to indicate that it has been removed

                // force the focus on the next input
                previousQuestion.querySelector( 'input' ).focus();
            }
        };

解释：
问题在于这一部分：
// changes the current question number
    stepsForm.prototype._updateQuestionNumber = function() {
        // first, create next question number placeholder
        this.nextQuestionNum = document.createElement( 'span' );
        this.nextQuestionNum.className = 'number-next';
        this.nextQuestionNum.innerHTML = Number( this.current + 1 );
        // insert it in the DOM
        this.questionStatus.appendChild( this.nextQuestionNum );
    };

具体来说，行this.nextQuestionNum=document.createElement（'span'）
它创建span
并保存对它的引用（this.nextQuestionNum
）。动画完成后，将使用该引用销毁该元素
当用户点击过快（即，比动画运行快）时，上述代码会再次执行，从而创建一个新的span
，并保留对该代码的引用。此时，如果原始span
未被删除，则代码将丢失指向它的指针，并像臭味一样挂起
因此，if
语句检查它是否为null并将其删除。
您可以在控制台中看到“未捕获的DomeException:未能在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。在htmlVelment.onEndTransitionFn（）”
我怀疑当您快速按下按钮时，您几乎同时发送了两个事件，它们试图删除同一个节点（并可能在某个位置重新添加它）。在执行self.questionStatus.removeChild（self.nextQuestionNum）操作时，需要确保Dom节点存在
您可以在控制台中看到一个“未捕获的DomeException:未能在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。位于HtmlLevel.onEndTransitionFn（）”
我怀疑当您快速按下按钮时，您几乎同时发送了两个事件，它们试图删除同一个节点（并可能在某个位置重新添加它）。在执行self.questionStatus.removeChild（self.nextQuestionNum）操作时，需要确保Dom节点存在
发生的是此函数：
// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {
    // first, create next question number placeholder
    this.nextQuestionNum = document.createElement( 'span' );
    this.nextQuestionNum.className = 'number-next';
    this.nextQuestionNum.innerHTML = Number( this.current + 1 );
    // insert it in the DOM
    this.questionStatus.appendChild( this.nextQuestionNum );
};

当按钮为上一个按钮或按下下一个按钮时，正在创建新的跨度元素。
之后调用函数stepsForm.prototype.\u previousQuestion
运行此代码块：
// after animation ends, remove class "show-previous" from form element and change current question placeholder
        var self = this,
            onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                if( self.isFilled ) {
                    self._submit();
                }
                else {
                    classie.removeClass( self.el, 'show-previous' );
                    self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
                    self.questionStatus.removeChild( self.nextQuestionNum );
                    // force the focus on the next input
                    previousQuestion.querySelector( 'input' ).focus();
                }
            };

问题是，当快速按下按钮时，第一个函数运行两次，第二个代码块才能删除第一个子项，因此它只删除一个子项，而另一个子项留在文档中
你可以试着移动这条线
self.questionStatus.removeChild( self.nextQuestionNum );

进入步骤form.prototype.\u updateQuestionNumber
函数，进行一些简单的验证以避免可能的错误，如：
// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {
    // if nextQuestionNum exists remove it
    if (this.nextQuestionNum.innerHTML){
        self.questionStatus.removeChild( self.nextQuestionNum );
    }
    // first, create next question number placeholder
    this.nextQuestionNum = document.createElement( 'span' );
    this.nextQuestionNum.className = 'number-next';
    this.nextQuestionNum.innerHTML = Number( this.current + 1 );
    // insert it in the DOM
    this.questionStatus.appendChild( this.nextQuestionNum );
};

正在发生的是此函数：
// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {
    // first, create next question number placeholder
    this.nextQuestionNum = document.createElement( 'span' );
    this.nextQuestionNum.className = 'number-next';
    this.nextQuestionNum.innerHTML = Number( this.current + 1 );
    // insert it in the DOM
    this.questionStatus.appendChild( this.nextQuestionNum );
};

当按钮为上一个按钮或按下下一个按钮时，正在创建新的跨度元素。
之后调用函数stepsForm.prototype.\u previousQuestion
运行此代码块：
// after animation ends, remove class "show-previous" from form element and change current question placeholder
        var self = this,
            onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                if( self.isFilled ) {
                    self._submit();
                }
                else {
                    classie.removeClass( self.el, 'show-previous' );
                    self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
                    self.questionStatus.removeChild( self.nextQuestionNum );
                    // force the focus on the next input
                    previousQuestion.querySelector( 'input' ).focus();
                }
            };

问题是，当快速按下按钮时，第一个函数运行两次，第二个代码块才能删除第一个子项，因此它只删除一个子项，而另一个子项留在文档中
你可以试着移动这条线
self.questionStatus.removeChild( self.nextQuestionNum );

进入步骤form.prototype.\u updateQuestionNumber
函数，进行一些简单的验证以避免可能的错误，如：
// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {
    // if nextQuestionNum exists remove it
    if (this.nextQuestionNum.innerHTML){
        self.questionStatus.removeChild( self.nextQuestionNum );
    }
    // first, create next question number placeholder
    this.nextQuestionNum = document.createElement( 'span' );
    this.nextQuestionNum.className = 'number-next';
    this.nextQuestionNum.innerHTML = Number( this.current + 1 );
    // insert it in the DOM
    this.questionStatus.appendChild( this.nextQuestionNum );
};

大家都很清楚，当用户快速单击背面（或者下一步，脚本也会随着快速单击下一步而中断）时，您会尝试删除不再存在的内容。快速修复方法可能是查询选择要删除的节点