猿问

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

想用事件代理给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>

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

婷婷同学_
浏览 438回答 1
1回答

白猪掌柜的

首先你点击input触发了focus事件，出现弹窗，点击确认后弹窗关闭是会让input再次获得焦点的，这又触发focus，导致不停弹窗，你可以验证一下弹窗关闭input是否会再次获得焦点&nbsp;var i=0;&nbsp;document.getElementsByTagName('table')[0]&nbsp; &nbsp; &nbsp; &nbsp; .addEventListener('focus',function (event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var event=event||window.event,//兼容ff&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target=event.target||event.srcElement;//兼容ie&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(i<=2){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (target.nodeName.toLocaleLowerCase()==="input"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(target.nodeName);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; },true);
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答