javascript - 在函数中使用 preventDefault() 的问题

Question

我在表单中间有一个按钮，我想通过 ajax 获取一些信息。我已经创建了一个函数并且按钮设置如下:

<button id="class-list" onclick="updateMc()" class="btn btn-warning" style="margin: 0;">Update MC</button>

我有这样的功能设置:但这仍然会提交表单。

function updateMc(event){
            event.preventDefault();
            var companyMc = $('#company_mc').val();
            $.ajax({
                type: "POST",
                url: "/saferscrapers",
                data: {
                    'company_mc': companyMc
                },
                complete: function(response) {
                    var responseText = response.responseText;
                    var json = jQuery.parseJSON(responseText);
                    for (var key in json){
                        if (json[key] != '') {

                            var element = document.getElementById(key);

                            if (element.type == 'checkbox') {
                                element.checked = (json[key] == "true");
                                element.value = (json[key] == "true" ? '1' : '0' );

                            }
                            else {
                                element.value = json[key];
                            }


                        }

                    }
                }
            });

        }

Answer 1

你有两个选择:

1. 将事件参数传递给函数:

   <button id="class-list" onclick="updateMc(event)" class="btn btn-warning" style="margin: 0;">Update MC</button>
   <!-- Note --------------------------------^^^^^            -->
   

   这适用于现代浏览器的跨浏览器，因为即使在没有全局 event 的浏览器上也是如此, 有一个 event在生成函数的范围内 onclick创造。

   但请注意，它不适用于旧版 IE(IE8 及更早版本)或处于“兼容模式”的 IE 会自行崩溃，因为旧版 IE 没有 preventDefault事件对象上的方法。

   另请注意，使用 onXyz attributes 要求你的函数是全局的，而全局命名空间已经很拥挤了。

2. 使用现代事件处理技术动态正确连接处理程序:

   <button id="class-list" class="btn btn-warning" style="margin: 0;">Update MC</button>
   

   然后:

   $("#class-list").on("click", updateMc);
   

考虑到解决方案 #1 的问题，我会使用解决方案 #2。