时间戳

首页 > 解决方案 > 同一个元素的两次点击事件

javascript - 同一个元素的两次点击事件

问题描述

我有一种情况，我有一个附加到元素的 onClick 属性的单击事件，以及一个在具有特定类的任何元素上触发的单击事件。元素的 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>

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

标签： javascriptjquery

解决方案

你可以试试

  • 将点击处理程序提取.proceed到命名函数
  • 从.proceed点击处理程序调用该命名函数
  • in openPanel，做函数需要做的任何事情，然后调用滚动处理程序，然后调用stopPropagation事件

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

推荐阅读