在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方法