javascript - 一个元素上有 2 个点击事件，只需要运行一个

Question

我在一个元素(按钮)上有 2 个点击事件。第一个是默认函数，用于执行一些常规检查(这是在我的过程中的一般步骤中完成的)，第二个是对我的过程中特定步骤的特定检查。

我的流程中的所有步骤都有一个下一步按钮可以转到下一步(下一页)，但如果某个步骤需要特定检查(字段验证)，我会给出 <div>围绕它一个额外的类，所以我可以用 jQuery 处理它。

默认下一步按钮

HTML:

<div>
   <a class="next-button" href="http://www.example.com/to-next-step/">Next step</a>
</div>

jQuery:

$('.next-button').click(function() {
   // Default checks
});

下一步按钮

HTML:

<div class="specific-step">
   <a class="next-button" href="http://www.example.com/to-next-step/">Next step</a>
</div>

jQuery:

$('.specific-step .next-button').click(function() {
   // Specific checks
});

当我在一个带有额外类的步骤上单击按钮时，两个函数都在运行。那么是否可以只运行“特定的下一步按钮功能”？

Answer 1

从附加到所有 .next-button 的单个通用点击处理程序内部测试父级是否具有特定步骤:

$('.next-button').click(function() {
    if($(this).parent().hasClass('specific-step')){
         performSpecificStep();
    }
    else{
        // Do standard stuff
    }
});

另一种方法是使用 e.stopImmediatePropagation() ，但此解决方案要求您的“特定”处理程序首先按照它们被附加的顺序执行:

例如

$('.specific-step .next-button').click(function (e) {
    e.stopImmediatePropagation();
});
$('.next-button').click(function (e) {
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/nb6thezu/