                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

它弹了两次2三次3，是事件冒泡吗？怎么阻止啊？stopPropagation()放在哪啊？

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <p>class为on的p标签</p>
</body>
</html>
<script type="text/javascript">
  window.onload=function(e){ 
    var len1= getByClass("on","list");
     alert(len1.length);  // 结果等于2为正确
    var len2= getByClass("on");
     alert(len2.length);  // 结果等于3为正确
}
function getByClass(clsName, parent){
 //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素  
    var oP = parent?document.getElementById(parent):document;
    var oOn = oP.getElementsByTagName("*");
    var on = [];
    for (var i=0,len=oOn.length;i<len;i++){
        if(oOn[i].className == clsName){
            on.push(oOn);
        }
    }
    return on;
}
</script>

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱

2017-09-25

源自：瀑布流布局 2-6

关注问题我要回答

1713

操作

收起

6 回答

精慕门529618
2020-05-15

是程序后台的原因，我把程序单独放在文件里执行就没有出现二次

0 回复有任何疑惑可以回复我~

收起回答

iron_hj
2018-12-04

你好，应该是 onload 的原因。

0 回复有任何疑惑可以回复我~

收起回答

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱提问者
2017-09-27

你这样的len2只是把body的class为on的子元素获取到了，所以len2.length=1; 我上面的len2是把所有为on的元素获取到了，所以我的len2.length=3；但是我们俩这样提交都会弹出多下。

0 回复有任何疑惑可以回复我~

收起回答

Tendernessmile
2017-09-27

                    window.onload=function(){ 
        		    var len1= getByClass("on","list");
        		     console.log(len1.length);  // 结果等于2为正确
        		    var len2= getByClass("on");
        		     console.log(len2.length);  // 结果等于1为正确
			}
			function getByClass(clsName, parent){
			 //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素  
			    var oP = parent?document.getElementById(parent):document.body;
			    var len = oP.children.length;
			    var on = [];
			    for (var i = 0; i < len; i++){
			        if(oP.children[i].className === clsName){
			            on.push(oP.children[i]);
			        }
			    }
			    return on;
			}

不知道你想要的是不是这种结果。然后你获取的是元素，不是给元素绑定事件，和事件冒泡关系不大吧，我了解的事件冒泡就是应用在动态绑定事件的时候，不知道子元素个数或者子元素个数动态变化时在父元素绑定事件，利用事件冒泡来进行事件处理。

0 回复有任何疑惑可以回复我~

收起回答

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱提问者
2017-09-26

上面html里面的body 把class丢了，晕，这里补上

<body>
       <ul id="list">
           <li class="on">1</li>
           <li class="select">2</li>
           <li class="on">3</li>
           <li>4</li>
       </ul>
       <p class="on">class为on的p标签</p>
</body>