參考問題 http://segmentfault.com/q/1010000003105089 答案無法解答疑惑~~
手工調(diào)用input的select方法，對(duì)應(yīng)的select事件相應(yīng)函數(shù)被執(zhí)行了多次
使用jquery的trigger方法也是如此
有人能解答下手工調(diào)用select方法發(fā)生了什么么？
2
601<!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被執(zhí)行了3次 方法2執(zhí)行2次
$("input").trigger("select");
//使用原生的方法 方法1被執(zhí)行了2次 方法2執(zhí)行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
0
0
人生最曼妙的風(fēng)景，竟是內(nèi)心的淡定與從容！
大概測(cè)試了一下，挺有意思的，原因不明，大致猜測(cè)是select事件本身的特殊性就會(huì)導(dǎo)致觸發(fā)多次
首先如果把select事件換成click事件，整個(gè)流程完全正常。其次，在input當(dāng)中寫onselect="return false;"會(huì)導(dǎo)致方法2不執(zhí)行、方法1只執(zhí)行一次，同時(shí)文本并沒有被選中，感覺上，整個(gè)select的流程，在最開始先觸發(fā)了方法1，實(shí)際上這個(gè)時(shí)候選中這個(gè)動(dòng)作本身還沒實(shí)現(xiàn)，所以可以被return false;阻止，而選中動(dòng)作完成后才會(huì)觸發(fā)方法2，同時(shí)還會(huì)再次觸發(fā)方法1，這其中可能還有時(shí)間點(diǎn)會(huì)再各觸發(fā)2個(gè)方法一次。最后，在方法1中return false;也會(huì)有類似效果，但是在方法2中，無論return false;event.preventDefault();event.stopPropagation();統(tǒng)統(tǒng)都沒有用
在不同的瀏覽器中確實(shí)顯示次數(shù)不一樣，trigger是把綁定在對(duì)象上的所有事件都執(zhí)行一遍，所以點(diǎn)擊按鈕出發(fā)trigger的時(shí)候顯示次數(shù)多
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)
收藏
