关于querySelectorAll的问题

Q稀里哗啦Q
  • 210
<body>
<?php require_once '../php/header.php'; ?>

    <div class="wrap" id="updata">
        <input id="file" type="file" multiple="multiple"/>
        <div class="float" v-if="float"> {{ more }} </div>
        <div class="list">
            <div class="tips" v-if="tips" v-on:click="selected">Please click <span>Add File</span> To Add The File</div>
            <div class="progress">
                <div class="quan">
                    <span></span>
                    <p class="text" id="progress"></p>
                </div>
            </div>
            <ul class="file-list">

                <li v-for=" ( l , index ) in list ">
                    <div class="element num" v-text=" getSerial(index) "></div>
                    <div class="element name" v-text=" getName(l.name) "></div>
                    <div class="element size" v-text=" getSize(l.size) "></div>
                    <div class="element type" v-text=" getType(l.name) "></div>
                    <div class="element del">Del</div>
                    <div class="element done">Done</div>
                </li>

            </ul>

        </div>
        <footer>
            <div class="button">
                <button class="add" v-on:click="selected">Add File</button>
                <button class="del">Delete</button>
                <button class="upload" v-on:click="upload">Done</button>
            </div>
        </footer>
    </div>

</body>
document.querySelector('#file').addEventListener('change',function () {

    updata.tips = false;
    var file = document.querySelector('#file');
    updata.list = file.files;
    console.log('已选择'+updata.list.length+'个文件');

    var element = document.querySelectorAll('.element');
    for ( var i=0;i<element.length;i++ ){
        element[i].addEventListener('mouseover',function (e) {
            updata.more = e.toElement.innerText;
            updata.float = true;
        })
        element[i].addEventListener('mousemove',function (e) {
            var x = Math.floor ( document.querySelector('.wrap').offsetLeft );
            var y = Math.floor ( document.querySelector('.wrap').offsetTop );
            x = e.pageX - x * 0.7 + 'px';
            y = e.pageY - y * 0.8 + 'px';
            document.querySelector('.float').style.transform = "translate("+ x +","+ y +")";
        })
        element[i].addEventListener('mouseout',function (e) {
            updata.float = false;
            updata.more = '';
        })
    }

    if( file.files.length == 0 ){
        updata.tips = true;
    }
});

如上代码,我不能成功地添加addEventListener事件

回复
阅读 3.3k
3 个回答
spencerht
  • 7.8k
✓ 已被采纳
  1. lz指的不能成功添加addEventListener事件指的是哪个,是element还是file
  2. 顺便把html也贴一下吧。。

补充:最小demo

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <style>
        .element {
            width:200px;
            height: 200px;
        }
        </style>
    <input id="file" type="file">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <script>
document.querySelector('#file').addEventListener('change',function () {
    
        var file = document.querySelector('#file');    
        var element = document.querySelectorAll('.element');
        for ( var i=0;i<element.length;i++ ){
            element[i].addEventListener('mouseover',function (e) {
                console.log("over")
            })
            element[i].addEventListener('mousemove',function (e) {
                console.log("move")
            })
            element[i].addEventListener('mouseout',function (e) {
                console.log("out")
            })
        }
    });
    </script>
</body>
</html>

以上,可以在chrome下运行。此外,这里和闭包没有任何关系~~
补充2:事件代理简单demo

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <style>
        li {
            width:200px;
            height: 200px;
        }
        </style>
    <input id="file" type="file">
    <ul id="file-list">
    </ul>
    <script>
    document.querySelector('#file').addEventListener('change',function () {
        var list = document.querySelector('#file-list');
        list.addEventListener('mouseover',function (e) {
          if (e.target.className) {
          }
        })
        list.addEventListener('mousemove',function (e) {
          if (e.target.className) {
          }
        })
        list.addEventListener('mouseout',function (e) {
          if (e.target.className) {
          }
        })
        var li = document.createElement("li");
        li.className = 'element'
        list.append(li)
    });
    </script>
</body>
</html>

通过event.target获得触发事件的元素,并通过其className或是其他属性判断其是否需要处理。

止醉
  • 770

一种是匿名函数解决,for循环已经循环完了,所以你每次mouseover应该获取的都是循环完的i的最大值,一种是var改成let

for ( var i=0;i<element.length;i++ ){
        (function(j){
         element[j].addEventListener('mouseover',function (e) {
            updata.more = e.toElement.innerText;
            updata.float = true;
        })
        element[j].addEventListener('mousemove',function (e) {
            var x = Math.floor ( document.querySelector('.wrap').offsetLeft );
            var y = Math.floor ( document.querySelector('.wrap').offsetTop );
            x = e.pageX - x * 0.7 + 'px';
            y = e.pageY - y * 0.8 + 'px';
            document.querySelector('.float').style.transform = "translate("+ x +","+ y +")";
        })
        element[j].addEventListener('mouseout',function (e) {
            updata.float = false;
            updata.more = '';
        })
        })(i)
    }
陌路凡歌
  • 7.8k

支持ES6就var 改成 let,
要兼容就搞个封闭空间

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <style>
        .element {
            width:200px;
            height: 200px;
            display: inline-block;
        }
        </style>
   <div id="box">
        <input id="file" @change="change" type="file" multiple="multiple">
    <li v-for=" (l,index) in list ">
                    <div class="element num" v-text="index"></div>
                    <div class="element name" v-text="l.name"></div>
                    <div class="element size" v-text="l.size"></div>
                    <div class="element type" v-text="l.name"></div>
                    <div class="element del">Del</div>
                    <div class="element done">Done</div>
       </li>
   </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                list:[]    
            },
            methods:{
                change:function(){
                     var file = document.querySelector('#file').files;
                    // console.log(Array.from(file));
                     this.list=file;
                   Vue.nextTick(function(){
                   
                    var element = document.querySelectorAll('.element');
                for ( var i=0;i<element.length;i++ ){      
                   (function(i){
                        element[i].addEventListener('mouseover',function (e) {
                        console.log(i);
            //          updata.more = e.toElement.innerText;
            //          updata.float = true;
                    })
                    element[i].addEventListener('mousemove',function (e) {
            //          var x = Math.floor ( document.querySelector('.wrap').offsetLeft );
            //          var y = Math.floor ( document.querySelector('.wrap').offsetTop );
            //          x = e.pageX - x * 0.7 + 'px';
            //          y = e.pageY - y * 0.8 + 'px';
            //          document.querySelector('.float').style.transform = "translate("+ x +","+ y +")";
                    })
                    element[i].addEventListener('mouseout',function (e) {
            //          updata.float = false;
            //          updata.more = '';
                    })
                   })(i);
                   
               }                       
                   })
    }
                }
                
            
        });
    
    </script>
</body>
</html>

clipboard.png

宣传栏