在ie9下在textbox框里面输入内容按enter键会触发按钮的事件

问题

在ie下，若是存在有button标签，若是在textbox里面输入内容，按下enter键，则会触发第一个按钮的click事件，通过测试，在IE10以及如下的都存在这个问题

缘由

浏览器默认行为不一致致使

IE浏览器IE8及之后的版本，会根据页面使用的文档模式（Defining document compatibility）来定义按钮的兼容性问题。IE8标准模式的默认行为是submit，其余模式的默认行为是button。

submit 该按钮是提交按钮（除了 Internet Explorer，该值是其余浏览器的默认值）。

button 该按钮是可点击的按钮（Internet Explorer 的默认值）。

reset 该按钮是重置按钮（清除表单数据）。

以上来自w3c 和这篇博客

解决办法

给button标签添加上属性type="button"，来保证必定是button，而不会是submit，好比

<button type="button"  id="btn">click me</button>

或者使用<input type="button" value="click"/>生成按钮

测试重现代码

html

textbox:<input type="text" />
<button type="button"  id="btn">click by button</button>
<button id="btn2">click2 by button</button>
<div>
<div>
	<p>log:</p>
	<div id="list">
	</div>
</div>
<div>
	<p>log2:</p>
	<div id="list2">
	</div>
</div>

js

var btn=document.getElementById('btn');
btn.onclick=addLog;
var list = document.getElementById('list');

function addLog (event) {
	debugger;
	var p = document.createElement('p');
	p.innerText='click button';
	list.appendChild(p);
}

var btn2=document.getElementById('btn2');
btn2.onclick=addLog2;
var list2 = document.getElementById('list2');

function addLog2 (event) {
	var p = document.createElement('p');
	p.innerText='click button2';
	list2.appendChild(p);
}

在ie10及如下，会发如今textbox输入按下enter键会触发addLog2方法