提交按鈕可在Chrome中使用，但不能在Firefox或IE中使用

Question

我有一個提交按鈕，在Chrome中似乎可以單擊，但在FF或IE中卻無法單擊。 任何幫助，將不勝感激！ 我覺得按鈕的格式不正確。

  <button> <img src="http://button_image.png" onclick="mySubmit();" ></button>

附加到mySubmit的JQ是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
function mySubmit(){
    var myForms = $("form");
    myForms.each(function(index) {
        var form = myForms.eq(index);
        var serializedForm = form.serialize();
        serializedForm += '&s_referer_fname='+$('#s_refererFname').val();
        $.post("http://post.aspx", serializedForm, function (data, status) {
            if (status === "success"){
                window.location.href= "http:url.aspx?";
            }  
        });   
    });
}
</script>

Answer 1

在FF和IE中，似乎onclick事件是通過按鈕而不是圖像標簽捕獲的。

如果要觸發事件，則跨瀏覽器將其分配給按鈕。 這樣，它就可以在瀏覽器中從圖像中傳播出來，並從圖像中抬起，而其他瀏覽器則立即在按鈕上捕獲它。

<button onclick="mySubmit();"> <img src="http://button_image.png" ></button>

將在FF，IE和Chrome中運行►https ://jsfiddle.net/aspqwc3p/1/

Answer 2

如果您希望圖像成為提交按鈕，則應將input標簽與type="image"屬性一起使用：

 <input type="image" src="http://button_image.png" onclick="mySubmit();" />

請注意，在mySubmit函數內部，應使用preventDefault()禁用默認行為：

function mySubmit() {
    this.preventDefault();

Answer 3

通常建議不要在HTML中放入任何JavaScript。 嘗試給按鈕一個ID並使用

$('#yourid').on('click', function(e) {
  e.preventDefault();
  .... your code
});

在您的JavaScript中。 （並將您的腳本標簽放在html的最后）