table表格里面td的点击冒泡事件

html部分：

<div class="wrapper">
			<div class="container">
				<table>
					<tr>
						<td>项目一：</td>
						<td>
							<input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" />
							<div class="win-con">
								<ul>
									<li>进行中：100 </li>
									<li>未完成：33 </li>
									<li>已处理问题：21 </li>
									<li>待解决问题：23 </li>
								</ul>						
							</div>
						</td>
						<td>项目二：</td>
						<td>
							<input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" />
							<div class="win-con">
								<ul>
									<li>进行中：100 </li>
									<li>未完成：33 </li>
									<li>已处理问题：21 </li>
									<li>待解决问题：23 </li>
								</ul>						
							</div>
						</td>
						<td>项目三：</td>
						<td>
							<input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" />
							<div class="win-con">
								<ul>
									<li>进行中：100 </li>
									<li>未完成：33 </li>
									<li>已处理问题：21 </li>
									<li>待解决问题：23 </li>
								</ul>
							</div>
						</td>
						<td>项目四：</td>
						<td>
							<input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" />
							<div class="win-con">
								<ul>
									<li>进行中：100 </li>
									<li>未完成：33 </li>
									<li>已处理问题：21 </li>
									<li>待解决问题：23 </li>
								</ul>						
							</div>
						</td>
					</tr>
					<tr>
						<td>项目一：</td>
						<td>
							<input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" />
							<div class="win-con">
								<ul>
									<li>进行中：100 </li>
									<li>未完成：33 </li>
									<li>已处理问题：21 </li>
									<li>待解决问题：23 </li>
								</ul>						
							</div>
						</td>
						<td>项目二：</td>
						<td>
							<input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" />
							<div class="win-con">
								<ul>
									<li>进行中：100 </li>
									<li>未完成：33 </li>
									<li>已处理问题：21 </li>
									<li>待解决问题：23 </li>
								</ul>						
							</div>
						</td>
						<td>项目三：</td>
						<td>
							<input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" />
							<div class="win-con">
								<ul>
									<li>进行中：100 </li>
									<li>未完成：33 </li>
									<li>已处理问题：21 </li>
									<li>待解决问题：23 </li>
								</ul>						
							</div>
						</td>
						<td>项目四：</td>
						<td>
							<input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" />
							<div class="win-con">
								<ul>
									<li>进行中：100 </li>
									<li>未完成：33 </li>
									<li>已处理问题：21 </li>
									<li>待解决问题：23 </li>
								</ul>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>

javascript部分：

<script>
			function buttonClick(){
				//不同浏览器对冒泡的不同处理方法
				if (event.stopPropagation){
	        		// this code is for Mozilla and Opera 
		        	event.stopPropagation();
		       	}else if (window.event) {
		        	// this code is for IE 
		        	window.event.cancelBubble = true;
		       	}
				
				//点击按钮事件：邻近的div.win-con弹出，其他位置的div隐藏
				$(".btn").click(function(){
					$(this).next(".win-con").show();
					$(this).parent().siblings().children(".win-con").hide();
					$(this).parent().parent("tr").siblings().children().children(".win-con").hide();
				});
				//点击全部dom，都会触发的事件，弹框隐藏
				$("body").click(function(){					
					$(".win-con").hide();
				});
				//点击弹出的弹框，弹框不隐藏
				$(".win-con").click(function(){
					if (event.stopPropagation){
		        		// this code is for Mozilla and Opera 
			        	event.stopPropagation();
			       	}else if (window.event) {
			        	// this code is for IE 
			        	window.event.cancelBubble = true;
			       	}
				});
			}
		</script>

css样式：

*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			
			.wrapper {
				width: 100%;
				height: 100%;
			}
			.container{
				width: 1000px;
				margin: 30px auto;
				height: auto;
			}
			.container table {
				width: 100%;
				text-align: center;
				border-collapse: collapse;
			}
			.container table td {
				position: relative;
				padding: 5px;
				border: 1px solid #CCCCCC;
			}
			.btn {
				cursor: pointer;
			}
			.win-con{
				display: none;
				position: absolute;
				height: auto;
				padding: 5px;
				background-color: #ffffdd;
				border: 1px solid #F9D049;
				z-index: 2;
			}
			.win-con ul {
				padding: 10px;
				white-space: nowrap;
				text-align: left;
			}

还有一点儿差强人意，就是在谷歌浏览器中，第一个开始点击的时候会点击两次才会弹出弹框，IE浏览器是正常点击的，希望各位大神们给指点一二，跪谢。。。