jquery调用子元素方法，父元素方法执行了两次？
0
悬赏园豆：100
[已解决问题]
解决于 2015-05-28 10:05
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<a href="#" onClick="functionOne();">父亲元素
<span onClick="functionTwo();">子元素</span>
</a>
</body>
<script type="text/javascript">
function functionOne(){
//doSoming
alert("1111");
}
function functionTwo(){
//doSoming
alert("2222");
}
$(function(){
$("a").find("span").click();
});
</script>
</html>
这里functionOne执行了两次，请问是怎么回事？另外怎么能解决这个问题，一次也不执行。前提是a标签还是span标签的父节点哈
最佳答案
1
return false应该是没用的， 我昨天正好也遇到了这个问题， 你在子元素里加上 event.stopPropagation()
这个方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
纯手打， 楼主如果有问题继续追问， 没问题就采纳吧！
收获园豆：80
大哥。你说的对，event.stopPropagation() 确实能拦截一次，只是进入页面的时候拦截了还出弹出一次，就是说使用$("a").find("span").click()会调用两次functionOne，二如果是在界面上点击span的话，只出现一次，加上你说的event.stopPropagation() ,界面上点击会被阻止，不会调用父页面的方法，但是初始化还是会调用一次。
@叶芝殇: 你这么做那是肯定的啊， 根据function的生命周期来考虑的话， 你完全没必要这么做啊。就是$("a").find("span").click();实际上他是点击了两次的， 一次是事件本身还有一次就是激活了这个onClick="functionTwo();"。 如果你是希望实现在首次加载和点击子元素的时候都只弹出一次，那我建议你这么做。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title>
<!--1.4.2这么老的jquery版本，你哪找的啊？ 都可以进博物馆了，建议你下载较新版本--> <!--<script type="text/javascript" src="jquery-1.4.2.min.js"></script>--> <script src="Scripts/jquery-1.10.2.min.js"></script> </head> <body> <a href="#" onClick="functionOne();">父亲元素 <span onClick="functionTwo();">子元素</span> </a> </body> <script type="text/javascript"> function functionOne(){ //doSoming alert("1111"); } function functionTwo(){ //doSoming alert("2222"); event.stopPropagation(); } $(function(){ functionTwo(); }); </script> </html>
纯手打， 楼主如果有问题继续追问， 没问题就采纳吧！
@请叫我头头哥: $("a").find("span").click()这个意思跟手动点击span不一样么……看你写的代码，我知道怎么改了，谢谢哈
@叶芝殇: 嗯， 条条大路通罗马！那真是恭喜看了。
其他回答(1)
0
换衣是你的事件冒泡导致的。建议在事件处理代码最后return false
收获园豆：20
是的哈，冒泡的话应该只执行一次才对啥。为啥执行两次，我尝试在functionTwo里面加啦returnfalse，还是没效果呢。能详细点么
@叶芝殇: 建议换种写法，直接onclick抓取不到具体的事件。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="jquery-1.11.3.js"></script> </head> <body> <a> 父亲元素 <hr> <span >子元素</span> </a> </body> <script type="text/javascript"> $(function(){ $('a').click(function(e){ alert("1111"); }); $('a>span').click(function(e){ alert("2222"); return false; }); var $span = $("a").find("span"); $span.click(); }); </script> </html>
@幻天芒: 我这个维护项目的时候看见的一个小问题，他是遍历的菜单，onclick事件这些都已经固定啦，不能修改了，谢谢哈
