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

Question

我正在开发一个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>标记事件而不加载任何页面？请帮助我一个人。

Answer 1

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

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

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

Answer 2

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

解决方案只需添加到按钮（如果您使用input或button）属性type="button"无关紧要。