Question

我在onSubmit的{{1}}事件中遇到问题。

我正在使用javascript form元素向其他网页发送一些跟踪信息（参数位于image）。

但是当我尝试加载GET（通过image属性）时，页面会在src请求发生之前刷新（或立即中止）。

这样，就不会向外部跟踪页面发送任何信息。我如何在image处理submit load的{{1}}处理器？

修改还有一点我错过了，其他事件可以在同一个地方（例如验证等）

Answer 1

这应该可以正常工作：

var img = document.getElementById('image'),
    form = document.getElementById('form');

img.addEventListener('load', function (){
    window.imageIsLoaded = true;
    if(window.submitForm === true){
        form.submit();
    }
}, false);

form.addEventListener('submit', function (e){
    window.submitForm = true;
    if(window.imageIsLoaded !== true){
        e.preventDefault();
        return false;
    }
}, false);

Demo

Answer 2

如果需要，可以在不使用全局变量的情况下自动提交表单的另一种方法：

document.getElementById('yourFrm').addEventListener('submit',(function()
{
    'use strict';
    var imgLoaded,img,tmpImgLoad;
    imgLoaded = false;
    img = document.getElementById('yourImg');
    tmpImgLoad = function ()
    {
        imgLoaded = true;
        img.removeEventListener('load',tmpImgLoad,false);//remove obsolete listener?
    };
    img.addEventListener('load',tmpImgLoad,false);
    return function(e)
    {
        if (!imgLoaded)
        {
            tmpImgLoad = function()
            {
                imgLoaded = true;
                img.removeEventListener('load',tmpImgLoad,false);
                document.getElementById('yourForm').submit();
            };
            e.preventDefault();
            e.stopPropagation();
        }
    };
})(),false);

此代码将load事件侦听器绑定到image元素，将闭包变量设置为true。如果在提交表单时该变量为false，则会更改load事件的回调以提交表单。

我承认这有点复杂，但你知道：全局变量不是解决这个问题的唯一方法。

也通过JSLint传递了很多东西。一些微小的调整和“容忍凌乱的白色空间”和“asume浏览器”这段代码完全没有任何警告或错误

如何在加载某些内容之前延迟“onsubmit”事件？

2 个答案: