首页 新闻 搜索 专区 学院

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();">父亲元素&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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标签的父节点哈

叶芝殇的主页 叶芝殇 | 初学一级 | 园豆:94
提问于:2015-05-27 17:26
< >
分享
最佳答案
1

return false应该是没用的, 我昨天正好也遇到了这个问题, 你在子元素里加上 event.stopPropagation() 

这个方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

纯手打, 楼主如果有问题继续追问, 没问题就采纳吧!    

收获园豆:80
请叫我头头哥 | 大侠五级 |园豆:9382 | 2015-05-27 19:12

大哥。你说的对,event.stopPropagation() 确实能拦截一次,只是进入页面的时候拦截了还出弹出一次,就是说使用$("a").find("span").click()会调用两次functionOne,二如果是在界面上点击span的话,只出现一次,加上你说的event.stopPropagation() ,界面上点击会被阻止,不会调用父页面的方法,但是初始化还是会调用一次。

叶芝殇 | 园豆:94 (初学一级) | 2015-05-28 09:07

@叶芝殇:  你这么做那是肯定的啊,  根据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();">父亲元素&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

纯手打, 楼主如果有问题继续追问, 没问题就采纳吧!    

请叫我头头哥 | 园豆:9382 (大侠五级) | 2015-05-28 09:56

@请叫我头头哥: $("a").find("span").click()这个意思跟手动点击span不一样么……看你写的代码,我知道怎么改了,谢谢哈

叶芝殇 | 园豆:94 (初学一级) | 2015-05-28 10:04

@叶芝殇: 嗯, 条条大路通罗马!那真是恭喜看了。

请叫我头头哥 | 园豆:9382 (大侠五级) | 2015-05-28 10:07
其他回答(1)
0

换衣是你的事件冒泡导致的。建议在事件处理代码最后return false

收获园豆:20
幻天芒 | 园豆:36662 (高人七级) | 2015-05-27 17:34

是的哈,冒泡的话应该只执行一次才对啥。为啥执行两次,我尝试在functionTwo里面加啦returnfalse,还是没效果呢。能详细点么

支持(0) 反对(0) 叶芝殇 | 园豆:94 (初学一级) | 2015-05-27 17:38

@叶芝殇: 建议换种写法,直接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>
支持(0) 反对(0) 幻天芒 | 园豆:36662 (高人七级) | 2015-05-28 09:58

@幻天芒: 我这个维护项目的时候看见的一个小问题,他是遍历的菜单,onclick事件这些都已经固定啦,不能修改了,谢谢哈

支持(0) 反对(0) 叶芝殇 | 园豆:94 (初学一级) | 2015-05-28 10:01
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册