同一元素的两次单击事件

Question

I have a situation where I have a click event attached to an element's onClick attribute and also a click event that fires on any element with a specific class. The element's onClick event causes a panel on the page to close. The class's onClick event causes the page to scroll to an element lower on the page.

The problem is that both seem to fire at the same time causing the page to scroll beyond the targeted element. Here is a code sample:

 $(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> 

Does anyone know how to fix this keeping in mind that my real code is much larger than the sample provided and has more classes and buttons.

Answer 1

You could try

• extract the .proceed click handler to a named function
• call that named function from the .proceed click handler
• in openPanel , do whatever the function needs to do, then call the scroll handler, then call stopPropagation on the event

In other words, don't allow two click handlers to fire for your radio button, but have one click handler that does both tasks and then stops propagation.

Answer 2

You don't need two onclick events. Just process the one for .proceed and check to see if rb1 is checked.

$(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);
    })
});