Button Tag 的一些细节

##问题
早上碰到的关于button tag问题,准确说应该是敲代码时没有注意,遗漏了button type 的attribute赋值。问题是这样的,就是button 效果在chrome下是不正常的,第一次刷新了整个页面,而我绑定的事件处理只是页面的一部分,但是第二次就是正常了,我换firefox是没有问题的?一开始猜测难道在绑定事件涉及到了浏览器兼容问题?就在chrome下debug,发现第一次在jQuery 事件进到这个if语句:

1
2
3
4
5
6
7
8
if ( !(eventHandle = elemData.handle) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
undefined;
};

第二次没有,那就是第一次eventHandle和当前dom的handle不一致出现的,为什么会不一致呢?返回去看到button 这个tag 没有加上type属性,难道是这个问题?加上果然就好了。虽然不是什么大问题,心理总有点什么,没有安全感,顺便就去看看button的tag的文档,主要是它得type属性。

##Button type
Button 这个标签重点应该是在type这个属性上,type有3个值:

  1. submit:”submits the form when clicked (default)”
  2. reset: “resets the fields in the form when clicked”
  3. button: “clickable, but without any event handler until one is assigned”

总结:出现这中小问题,不细心加上没有系统阅读html tag 文档的结果吧。

##参考资料
http://stackoverflow.com/a/10079197/1335396
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button