要实现一个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() 方法