javascript - input select()方法调用后发生了什么-PHP中文网问答

参考问题 http://segmentfault.com/q/1010000003105089 答案无法解答疑惑~~

手工调用input的select方法，对应的select事件相应函数被执行了多次
使用jquery的trigger方法也是如此
有人能解答下手工调用select方法发生了什么么？

<!DOCTYPE html>
<html>
<head>
    <title>Number Entry</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="script/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        //方法1
        $("#FirstName").on("select",function() {
            $("input").after("[jquery select 文本被选中]");
        });
        //方法2
        document.getElementById('FirstName').addEventListener("select",function(event){

            //console.log('文本被选中！');
            $("input").after("[native文本被选中！]");
        },false);


        $("button").click(function() {
            //方法1被执行了3次 方法2执行2次
            $("input").trigger("select");
            //使用原生的方法 方法1被执行了2次 方法2执行2次
            //document.getElementsByName('FirstName')[0].select();
        });

    });

    </script>
</head>

<body>
    <input type="text" id="FirstName" name="FirstName" value="Hello World kikong" />
    <br />
    <button >激活 input 域的 select 事件</button>
</body>

</html>

全部回复(2)

伊谢尔伦2017-04-10 15:43:04 2楼

大概测试了一下，挺有意思的，原因不明，大致猜测是select事件本身的特殊性就会导致触发多次

首先如果把select事件换成click事件，整个流程完全正常。其次，在input当中写onselect="return false;"会导致方法2不执行、方法1只执行一次，同时文本并没有被选中，感觉上，整个select的流程，在最开始先触发了方法1，实际上这个时候选中这个动作本身还没实现，所以可以被return false;阻止，而选中动作完成后才会触发方法2，同时还会再次触发方法1，这其中可能还有时间点会再各触发2个方法一次。最后，在方法1中return false;也会有类似效果，但是在方法2中，无论return false;event.preventDefault();event.stopPropagation();统统都没有用

赞 +0

添加回复

PHP中文网2017-04-10 15:43:04 1楼

在不同的浏览器中确实显示次数不一样，trigger是把绑定在对象上的所有事件都执行一遍，所以点击按钮出发trigger的时候显示次数多