关于querySelectorAll的问题

<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事件

html javascript vue.js

阅读 4.2k

3 个回答

spencerht

✓ 已被采纳

lz指的不能成功添加addEventListener事件指的是哪个，是element还是file？
顺便把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或是其他属性判断其是否需要处理。

一种是匿名函数解决，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.9k21119

发布于
2017-08-20

更新于
2017-08-20

支持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>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

关于querySelectorAll的问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？