input select()方法调用后发生了什么
参考问题 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（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();统统都没有用
在不同的浏览器中确实显示次数不一样，trigger是把绑定在对象上的所有事件都执行一遍，所以点击按钮出发trigger的时候显示次数多