javaScript click事件 层控制的问题

要实现一个javaScript 方法,大层调用一个js 事件,该层内部的元素调用调用另一个方法。

问了个朋友才知道,可以使用 stopPropagation() 方法来停止事件的传播。

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.li_content{ background-color:#fff;  display:none; }
.span_edit{ padding-left:15px;}
</style>
<script src="Script/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".li_title").bind("mouseover", function() {
$(this).css("background-color", "#C7EEFF");
}).bind("mouseout", function() {
$(this).css("background-color", "#fff");
}).bind("click", function() {
$(this).next(".li_content").toggle();
});
$(".span_edit").click(function(event) {
alert("只调用编辑");
event.stopPropagation();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div >
<ul >
<li class="li_title"><span class="span_title">信息1</span><span class="span_edit">编辑</span></li>
<li class="li_content">信息1信息1信息1信息1信息1信息1</li>
<li class="li_title"><span class="span_title">信息2</span><span class="span_edit">编辑</span></li>
<li class="li_content">信息2信息2信息2信息2信息2信息2</li>
<li class="li_title"><span class="span_title">信息3</span><span class="span_edit">编辑</span></li>
<li class="li_content">信息3信息3信息3信息3信息3信息3</li>
</ul>
</div>
</form>
</body>
</html>
参考1。stopPropagation() 方法
原文地址:https://www.cnblogs.com/dooom/p/1776038.html