如何在没有页面加载的情况下创建按钮事件？答案

【问题标题】：How to create button event occurs without page load?如何在没有页面加载的情况下创建按钮事件？
【发布时间】：2016-04-04 18:30:47
【问题描述】：

我正在开发一个 asp.net 应用程序，我的按钮是这样写的：-

<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>

我还有一个用于上述按钮的客户端 javascript 函数：

<script type="text/javascript">
  function imagech() {
    alert('image clicked.');
  }
</script>

我想要的是，每当我单击该功能时，按钮单击事件不应触发页面加载。上面的对象不是服务器控件，但它的事件发生在页面加载。我也可以像这样使用另一个 html 控件：

<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />

这不会发生页面加载，但我希望图标也用作：

<i class='fa fa-times'></i>

在<button> 标签内。但<i> 标签未在<input> 标签中使用。我如何在没有任何页面加载的情况下<button> 标记事件？请帮助我这里的人。

【问题讨论】：

without any page-load 我不确定我是否理解正确
在window.onload处理程序中使用JavaScript event binding
@Rayon Dabre 我该如何使用它？
window.onload= function(){ document.getElementById(YOUR_ID).addEventListener('click', ....) }
@guradio 当我使用

【解决方案1】：

您似乎在 <form> 元素中使用了 <button>。默认情况下，按钮充当提交按钮，它尝试在点击时提交表单。

为了继续使用按钮并避免此问题，您需要将 type 指定为按钮，如下所示

<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>

【讨论】：

【解决方案2】：

如果我理解正确，问题是按钮位于form（主要的 asp.net 表单）内，click 事件将表单发布到服务器。这就是您发生页面加载的原因。

解决方法只需在按钮上添加属性input或button即可。

【讨论】：