账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    使用事件委托,click改变了背景颜色,点击后出现颜色改变但立刻消失了是怎么回事
    296
    0

    html代码

                    <ul class="header-nav" id="header-nav">
                        <li>
                            <a href="" class="active">首页</a>
                        </li>
                        <li>
                            <a href="">代码世界</a>
                        </li>
                        <li>
                            <a href="">猿故事</a>
                        </li>
        
                    </ul>

    js代码

    var EventUtil = {
    
                    addHandler: function (element, type, handler) {
                        if (element.addEventListener) {        //DOM2级
                            element.addEventListener(type, handler, false);
    
                        } else if (element.attachEvent) {      //DOM1级
                            element.attachEvent("on" + type, handler);
    
                        } else {
                            element["on" + type] = handler;    //DOM0级
                        }
                    },
    
                    removeHandler: function (element, type, handler) {   //类似addHandler
    
                        if (element.removeEventListener) {
                            element.removeEventListener(type, handler, false);
    
                        } else if (element.detachEvent) {
                            element.detachEvent("on" + type, handler);
    
                        } else {
                            element["on" + type] = null;
    
                        }
                    }
                }
            window.onload = function(){   
                var ul = document.getElementById('header-nav');
                var aLi = ul.getElementsByTagName("li");
                EventUtil.addHandler(ul,"click",function(event){
                    var ev = ev || window.event;
                    var target = ev.target || ev.srcElement;
                    console.log(target);//这里在控制台闪现一下
                    if(target.nodeName.toLowerCase() == "li"){
                        var that=target;
                        console.log(that);//这里没执行
                        var index;
                        for(var i=0;i<aLi.length;i++){
                            if(aLi[i]===target){
                                index=i;
                            }
                            if(index>=0){
                                alert('我的下标是第'+index+'个');
                            }
                            target.style.background = "red";
                        }
                    }    
                })
            }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 碛里沙 普通会员 1楼

      这个问题可能涉及到事件监听器和JavaScript中的"伪元素选择器"。事件监听器用于处理用户的事件,例如点击事件。伪元素选择器用于选择在文档中非可见元素,这些元素不会在文档的任何其他部分显示。

      在你的例子中,事件监听器可能会监听到click事件,然后根据点击事件的类型来改变背景颜色。然而,当点击事件消失时,改变背景颜色的代码可能会立即执行,导致背景颜色立即改变,然后又消失。

      要解决这个问题,你需要在改变背景颜色之前等待一段时间,以便用户的操作。你可以在改变背景颜色之前添加一个延迟函数,例如:

      javascript function changeBackgroundColor() { // 等待一段时间后改变背景颜色 setTimeout(function() { document.body.style.backgroundColor = 'newColor'; }, 1000); }

      在这个例子中,setTimeout函数会在1秒后执行changeBackgroundColor函数。这意味着用户将有足够的时间来观察背景颜色的变化,然后再点击事件。

      另外,你还可以使用addEventListener方法在<body>元素上添加事件监听器,以确保用户有足够的时间来观察背景颜色的变化:

      javascript body.addEventListener('click', function() { changeBackgroundColor(); });

      在这个例子中,addEventListener方法将在body元素上添加一个click事件监听器。当用户点击body元素时,changeBackgroundColor函数将被调用。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部