demo演示图:
下边是具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<body>
<table style=" font-size:16px" border="1">
<tbody>
<tr>
<td class="shijians" id="sdfs">
<div style="height: 10px;"></div>
<div >
<a id="ssss" href="javascript:;" οnclick="show()">有事件4</a>
<a href="javascript:;" οnclick="show()">有事件5</a>
<a href="javascript:;" οnclick="show()">有事件6</a>
</div>
<div style="height: 10px;"></div>
</td>
</tr>
</tbody>
</table>
单击单元格空白处只触发单元格事件,单击单元格<a>标签内容,只触发<a>标签本身的单击事件,不触发单元格事件。
<script>
function stopEvt(e) {
e.stopPropagation();//阻止点击事件向上冒泡
}
document.getElementById("sdfs").addEventListener("click", show1);//给父标签添加事件
function show() {
alert("点我了!!!")
debugger;
hello();
console.info("12321421")
event.stopPropagation();
//console.info(event);
}
function show1() {
alert("单元格事件!!!")
}
function hello() {
console.info("12321421")
alert("hello world!");
}
</script>
</html>