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

html部分：

<div class="wrapper">
<div class="container">
<table>
<tr>
<td>项目一：</td>
<td>
<input type="button" class="btn" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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浏览器是正常点击的，希望各位大神们给指点一二，跪谢。。。