[英]Two click events for the same element
我遇到的情況是,我將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>
有沒有人知道如何解決此問題,請記住我的真實代碼比提供的示例大得多,並且具有更多的類和按鈕。
你可以試試
.proceed
單擊處理程序提取到命名函數 .proceed
單擊處理程序調用該命名函數 openPanel
,執行函數需要執行的所有操作,然后調用滾動處理程序,然后在事件上調用stopPropagation
換句話說,不要為您的單選按鈕觸發兩個單擊處理程序,而是讓一個單擊處理程序執行兩個任務,然后停止傳播。
您不需要兩個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);
})
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.