调用 javascript 函数时，HTML 图像“onclick”重定向到另一个页面（不需要）

Question

我有一个要单击的 HTML 图像，它将触发一个要调用的 javascript 函数，该函数将根据 ruby​​ 生成的collection_select 对页面进行一些更改。但每当我尝试调用该函数时，它重定向到另一个页面 (pages\main.html.erb)，这不是我想要的。

html图片（及相关代码）：

<%= f.collection_select :id,
    Customer.where(business_id: current_customer.business_id),
    :id,
    :full_name,
     { prompt: 'Select' },
     { id: "colleage-select", onChange: "renderColCal(this)" } %>

<input type="image" src="http://..." onclick="addParticipant()">

 ....

<p>Meeting Participants:</p>
 <ol id ="list">

 </ol>

javascript：

//application.js

var List = document.getElementById('list'); //found in events\new.html.erb

function addParticipant(){

    var name = document.getElementById('colleague-select').textContent; //gets :full_name of selected Customer
    var entry = document.createElement('li'); //creates new list element within ordered list 'list'
    entry.appendChild(document.createTextNode(name)); //adds :full_name to list element
    List.appendChild(entry); //adds list element to ordered list

}

我已将'addParticipant()' 中的代码替换为alert('hello')，并且在没有重定向的情况下运行良好，那么我的javascript 代码中是什么导致了问题？任何帮助将不胜感激，谢谢。

Answer 1

弹出的警告对话框会停止默认点击行为，但您的代码不会。

您需要明确地这样做：

function addParticipant(e) {
  ...
  e.preventDefault();
}