同一元素的两次单击事件

Question

我遇到的情况是，我将click事件附加到元素的onClick属性上，并且还将click事件触发具有特定类的任何元素。 元素的onClick事件导致页面上的面板关闭。 该类的onClick事件使页面滚动到页面下方的元素。

问题在于两者似乎同时触发，导致页面滚动到目标元素之外。 这是一个代码示例：

 $(document).ready(function() { $('.proceed').on("click", function() { $('html, body').animate({ scrollTop: $(this).closest('.item-section').next().offset().top }, 2000); }) }); function openPanel() { var rb1 = $("#radioButton1").is(':checked'); alert("Clicked"); $('#containerBox1').toggle(rb1); } 

 .item-section { height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action=""> <div class="item-section"> <p>Choose a food</p> <input type="radio" id="radioButton1" name="food" value="pizza" onclick="openPanel()">Pizza<br> <div id="containerBox1" style="display: none;"> <p>Choose a topping</p> <input type="radio" name="topping" value="pepperoni">Pepperoni<br> <input type="radio" name="topping" value="vegetarian">Vegetarian<br> <button class="proceed">Proceed to next section</button> </div> <input type="radio" name="food" value="burger" class="proceed">Burger<br> <input type="radio" name="food" value="fish" class="proceed">Fish </div> <div class="item-section"> <p>Drink selection would be here</p> </div> </form> 

有没有人知道如何解决此问题，请记住我的真实代码比提供的示例大得多，并且具有更多的类和按钮。

Answer 1

你可以试试

• 将.proceed单击处理程序提取到命名函数
• 从.proceed单击处理程序调用该命名函数
• 在openPanel ，执行函数需要执行的所有操作，然后调用滚动处理程序，然后在事件上调用stopPropagation

换句话说，不要为您的单选按钮触发两个单击处理程序，而是让一个单击处理程序执行两个任务，然后停止传播。

Answer 2

您不需要两个onclick事件。 只需为.proceed处理一个，然后检查是否检查了rb1。

$(document).ready(function() {
    $('.proceed').on("click", function() {
        var rb1 = $("#radioButton1").is(':checked');
        if( rb1 ) {
            alert("Clicked");
            $('#containerBox1').toggle(rb1);
        }
        $('html, body').animate({
            scrollTop: $(this).closest('.item-section').next().offset().top
        }, 2000);
    })
});