Click事件在JavaScript中的不同按钮控件上触发

kxe2p93d 于 5个月前发布在 Java

关注(0)|答案(2)|浏览(91)

我有下面的HTML代码，我在那里添加项目到购物车，然后最后点击提交。

<div class="form-group">
   <div>
     <select id="available-options" multiple>
         <option value="option1">Option 1</option>
         <option value="option2">Option 2</option>
         <option value="option3">Option 3</option>
      </select>
     <button id="add-button" aria-label="Add">Add</button>
   </div>
 </div>
<div class="box-footer">
     <button type="submit" class="btn btn-default">Cancel</button>
     <button type="submit" class="btn btn-info pull-right">Update</button>
</div>

字符串
下面是JavaScript

window.onload = function () {
      const addButton = document.getElementById("add-button");

       addButton.addEventListener("click", () => {
       const selected = availableOptions.selectedOptions;
       for (let i = 0; i < selected.length; i++) {
          const option = selected[i];
          selectedOptions.appendChild(option);
         }
     });
   }

型
当我点击add按钮时，两个按钮事件都被触发了！

JavaScript

来源：https://stackoverflow.com/questions/77744074/click-event-fires-on-different-button-control-in-javascript

2条答案

按热度按时间

slsn1g291#

button* 元素的默认type是导致提交 form 的 submit。您可以指定 buttontype="button"或使用event.preventDefault()阻止默认行为。
Demo：

<form>
  <div class="form-group">
    <div>
      <button id="add-button" aria-label="Add">Add</button>
    </div>
  </div>

  <div class="box-footer">
    <button type="submit" class="btn btn-default">Cancel</button>
    <button type="submit" class="btn btn-info pull-right">Update</button>
  </div>
</form>
<script>
  window.onload = function () {
    const addButton = document.getElementById("add-button");

    addButton.addEventListener("click", (event) => {
      event.preventDefault(); //prevent the form from submitting

      //other code here
      console.log("Add button clicked");
    });
  };
</script>

字符串

赞(0）回复(0）举报 5个月前

oo7oh9g92#

尝试在事件处理程序中使用event.stopPropagation()。
这个问题可能是因为JavaScript管理事件的方式。Javascript默认遵循事件冒泡。所以在这里，当目标事件完成时，它也会调用它的下一个父级事件处理程序，或者更好地说，事件冒泡到其父级，它会一直到最后的DOM事件。所以，为了防止这种情况，我们必须在handler方法中特别提到event.stopPropagation()。
我想上面的答案会对你有所帮助。我也给了一个关于这个主题的参考链接，请检查这个参考链接。

赞(0）回复(0）举报 5个月前

我来回答

Click事件在JavaScript中的不同按钮控件上触发

2条答案

相关问题

热门标签

最新问答