1. submit按钮

<input type="submit">按钮不在<form></form>中不会提交表单。

2. <button>按钮

<button>text<button>相当于submit按钮,在<form></form>中点击,提交表单。

3. 阻止submit默认事件

submit按钮click事件中的e.preventDefault();会阻止submit按钮提交表单。

document.querySelector('#button1').addEventListener('click',function(e){ 
    e.preventDefault(); 
},false);

4. 阻止form默认事件

form的submit事件中e.preventDefault();会阻止表单提交。

document.querySelector('#form1').addEventListener('submit',function(e){ 
    e.preventDefault(); 
},false);

5. 让submit按钮disabled

(1)点击前让按钮disabled会导致click事件不触发

document.querySelector('#button1').setAttribute('disabled',true);

(2)submit按钮的click事件中disable按钮,会阻止表单提交。

document.querySelector('#button1').addEventListener('click',function(){ 
    var button=this; 
    button.setAttribute('disabled',true); 
},false);

注:

document.querySelector('#button1').addEventListener('click',function(){ 
    var button=this; 
    button.setAttribute('disabled',true); 
 
    //仍然会阻止表单提交 
    setTimeout(function(){ 
        button.removeAttribute('disabled'); 
    },0); 
},false);
发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

CentOS系统下中文文件名乱码详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。