问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用事件代理 让input获得焦点 focus 后 但是像下面代码这样做 会导致alert一直弹出

头像
ManGogan
    714

    想用事件代理给input添加焦点和取消焦点事件，但是我这样写了之后会导致，alert弹窗一直出现，一直弹窗。这样写的代码确实不好，但是我想知道问题出在了哪里（Ps:给个链接也行。。。）。谢谢各位。

    <body>
        <form>
            <table>
                <tr>
                    <td>名称：</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><p>必填，长度为4-10个字符</p></td>
                </tr>
            </table>
            <button>提交</button>
        </form>
<script>
    document.getElementsByTagName('table')[0]
        .addEventListener('focus',function (event) {
                var event=event||window.event,//兼容ff
                    target=event.target||event.srcElement;//兼容ie
                if (target.nodeName.toLocaleLowerCase()==="input"){
                    alert(target.nodeName);
                }
        },true);//我查到了，onfocus,onchange等事件是不会在dom树上冒泡的
</script>

    页面图片一直没法上传。。。

    javascript事件代理焦点
    阅读 5.3k
    2 个回答
    得票最新
    头像
    陌路凡歌
      7.9k21119
      ✓ 已被采纳

      首先你点击input触发了focus事件，出现弹窗，点击确认后弹窗关闭是会让input再次获得焦点的，这又触发focus，导致不停弹窗，你可以验证一下弹窗关闭input是否会再次获得焦点

       var i=0;
 document.getElementsByTagName('table')[0]
        .addEventListener('focus',function (event) {
                i++;
                var event=event||window.event,//兼容ff
                    target=event.target||event.srcElement;//兼容ie
               if(i<=2){
                if (target.nodeName.toLocaleLowerCase()==="input"){
                    alert(target.nodeName);
                }
               }
        },true);
      头像
      ahxdg
        612

        上面分析的是正确的。另外一种方法：可以自己写弹窗，封装成公用的方法，一来比原生弹窗美观，二来自己可以做额外处理（加回调什么的，同时不会阻断程序运行。）

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题