javascript中使用事件委托无法获取到event.target-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

javascript中使用事件委托无法获取到event.target

2016-03-17 11:59:16 2391 1
<!doctype html>
<html>
<head>
    <title>image's transition</title>
    <script type="text/javascript">
    window.onload = function(){
        var pic_wrapper = document.getElementById("pic_wrapper");
        var ul = document.getElementsByTagName("ul")[0];
        var lis= document.getElementsByTagName("li");
        var imgs = pic_wrapper.getElementsByTagName("img");
                    //使用for循环绑定事件处理函数,通过测试
        // for (var i = 0; i < lis.length; i++) {
        //  var img = imgs[i];
        //  var li = lis[i];
        //  setOpacity(li,img);

        //  function setOpacity(li1,img1){
        //      li1.onmouseover = function(){
        //          setAllOpacity();
        //          img1.style.opacity = "1";
        //      };
        //  }
        // };
        function setAllOpacity(){
            for(var i = 0; i < imgs.length; i++){
                imgs[i].style.opacity = "0";
            }
        }
        //使用事件委托方式,但存在问题
        ul.onmouseover = function(event){
            event = event || window.event;
            var target = event.target || event.srcElement;
            switch(target.id){//问题在于target.id,通过正常交互无法获取target.id
                case "li1":
                    setAllOpacity();
                    imgs[0].style.opacity = "1";alert("li1");
                    break;
                case "li2":
                    setAllOpacity();
                    imgs[1].style.opacity = "1";alert("li2");
                    break;
                case "li3":
                    setAllOpacity();
                    imgs[2].style.opacity = "1";
                    break;
                case "li4":
                    setAllOpacity();
                    imgs[3].style.opacity = "1";
                    break;
            }
        };

        function fire(elem, type){  
            var evt;  
            if(document.createEventObject){ 
                elem.fireEvent('on'+type);  
            }else{
                evt = document.createEvent('MouseEvents');   
                evt.initEvent(type, true, false);  
                elem.dispatchEvent(evt);  
            }  
        }  
        fire(lis[0],"mouseover");//通过手动触发事件,可以获取target
    };
    </script>
    <style type="text/css">
    *{
        padding: 0;
        border: 0;
        margin: 0;
    }
    #wrapper{
        width: 800px;
        height: 600px;
        margin: 20px auto;
        position: relative;
        overflow: hidden;
    }
    #pic_wrapper{
        position: absolute;
    }
    #pic_wrapper img{
        width: 800px;
        height: 600px;
        position: absolute;
        transition: opacity 0.5s ease-in;
        opacity: 0;
    }
    .num{
        position: absolute;
        bottom: 50px;
        left: 390px;
    }
    li{
        display: inline;
        cursor: pointer;
    }
    </style>

</head>
<body>
    <div id="wrapper">
        <div id="pic_wrapper">
            <img src="transition1.jpg">
            <img src="transition2.jpg">
            <img src="transition3.jpg">
            <img src="transition4.jpg">
        </div>
        <ul class="num">
            <li id="li1"><img src="num.jpg"></li>
            <li id="li2"><img src="num.jpg"></li>
            <li id="li3"><img src="num.jpg"></li>
            <li id="li4"><img src="num.jpg"></li>
        </ul>
    </div>
</body>
</html>
取消 提交回答
全部回答(1)
相关问答

1

回答

Java 中,Serializable 与 Externalizable 的区别是什么?

2022-04-03 15:58:08 398浏览量 回答数 1

1

回答

JavaScript的运行模式是什么?

2021-10-18 11:51:33 233浏览量 回答数 1

1

回答

JavaScript中DOM1 API的一个疑问?

2020-01-09 17:13:17 262浏览量 回答数 1

1

回答

javascript二个submit问题

2016-07-15 15:13:53 1872浏览量 回答数 1

1

回答

java正则截取出javascript中的json代码片段

2016-07-06 19:24:19 1968浏览量 回答数 1

1

回答

javascript中变量作用域的问题

2016-06-01 14:04:20 1844浏览量 回答数 1

1

回答

javascript 的For和event的问题

2016-03-12 14:17:43 1398浏览量 回答数 1

1

回答

为什么无法用JavaScript给DOM设置事件?

2016-03-23 09:08:10 1454浏览量 回答数 1

1

回答

关于JavaScript给text赋值的问题

2016-03-18 10:09:40 2260浏览量 回答数 1

1

回答

javascript 函数声明在if语句里面

2016-03-17 11:10:18 1948浏览量 回答数 1
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载