onclick 事件在谷歌浏览器上不起作用答案

【问题标题】：onclick event not working on google chromeonclick 事件在谷歌浏览器上不起作用
【发布时间】：2015-06-12 18:35:33
【问题描述】：

我的表单中有一个提交按钮，我没有使用 onsubmit 事件，因为我要在同一个表单中添加更多提交按钮。所以我这样做：

<script type="text/javascript" src="../script/script.js"></script>

<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data">
    <input type="submit" id="submit1" value="Add" onclick="return confirmMessage();"/>
</form>

function confirmMessage()
{
    var x = confirm("...");
    if(x)
    {
        document.getElementById("my_post_value").value = "val1";
        return true;
    }
    return false;
}

我正在使用最新版本的 Firefox、IE 和 Google Chrome，但在 Chrome 中，onclick 事件不起作用。

【问题讨论】：

您可以为脚本添加更多上下文吗？具体来说，与输入相比，它包含在哪里？
onclick button input not working in Chrome 的可能重复项
在我的 Chrome 上运行良好 - 错误消息是什么？

标签： javascript html google-chrome

【解决方案1】：

不要为您的submit 按钮使用onclick 属性，而是为您的<form> 使用onsubmit

尝试如下替换您的代码

<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data" onsubmit="return confirmMessage();">
    <input type="text" name="email" id="email">
    <input type="submit" id="submit1" value="Add"/>
</form>

【讨论】：

是的。但问题是我要添加更多提交按钮，所以在这种情况下我不能使用 onsubmit。
然后将它们更改为普通按钮，而不是提交按钮。

【解决方案2】：

因为你在进入一个表单，onsubmit 事件是自动触发的，停止它的一种方法是在调用confirmMessage() 之后，返回false。阻止事件传播：

<form id="form_cad" action="my_php.php" method="post"   
    enctype="multipart/form-data" onclick="confirmMessage(); return 
    false;">
    <input type="text" name="email" id="email">
    <input type="submit" id="submit1" value="Add"/>
</form>

【讨论】：

只有在confirmMessage 返回 true 时才会触发 onsubmit 事件，这可能是您自己选择的。

【解决方案3】：

它在我的 Chrome 中运行良好，而且我在提交按钮上使用事件从来没有遇到过问题，但是由于您使用的是外部 js 文件，因此您可能希望使用纯 js 解决方案来尝试它，而不是内联：

请看下面的例子：

function confirmMessage() {
  var x = confirm("Click OK to submit form");
  if (x) {
    return true;
  }
  return false;
}

document.getElementById('submit1').onclick = function() {
  return confirmMessage();
};

<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data" onsubmit="alert('submitting')">
  <input type="submit" id="submit1" value="Add" />
</form>

表单的onsubmit中的alert只是为了说明事件实际上只在confirm()返回true时才被调用。

【讨论】：

【解决方案4】：

我遇到了类似的问题，但我修复了它在“onclick”函数中启动提交事件。我还阻止了该事件以防止在使用 Firefox 的情况下启动它两次：

submit_button.click(function(event){
    event.preventDefault();
    var selected_file = $("#id-file-to-upload").val();
    if (selected_file) {
        submit_button.prop('disabled', true);
        submit_button.prop('value', "Loading");
    }
    var upload_form = $("#id-form-to-submit");
    upload_form.submit();
});

【讨论】：