jQ的select事件和trigger方法的小冲突

Posted 2020-08-04 liyan.web

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQ的select事件和trigger方法的小冲突相关的知识，希望对你有一定的参考价值。

方法和事件都不难理解，分开用也都没问题，但是一起用就有些小问题出现。

直接上结论：使用trigger方法触发一个文本类型的 input 元素的select事件时，chrome浏览器会错误的触发三次，firefox和ie11只会正常触发一次

解决办法也简单，把trigger换成triggerHandler（）即可。

网上搜了下，有说是trigger（）的方法的问题，有说是冒泡问题的，有说是select触发机制的问题。

然而这些并没有说服我，填补不了好奇心，所以找不到答案就自己尝试

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>
</html>

这是代码，点击按钮，会在页面添加文本被选中！的提示，但是会出现三次！！！

问题是在查api时在w3school时发现的，trigger可以触发的事件那么多，前辈们故意选择会出错的select是为了提醒我们小心么0.0

给个链接，好奇的自己去试试http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_trigger

首先发现时，第一反应是是不是jquery给元素的捕获阶段、目标阶段、冒泡阶段分别绑定了事件。

查看trigger说明，它会触发所有匹配元素的指定事件。所以就换成了triggerHandler();然后果然只触发一次了。

好开心有没有，解决问题了有没有。然而我就是那么闲的蛋疼

忍不住想，jQ那么出名流行的库，没理由绑定事件绑定的那么奇葩啊，捕获目标冒泡全绑定，多层事件触发要怎么搞？一个一个的阻断事件？不可能啊。

所以又换回trigger，把input的select事件换成click。然后果然也只会触发一次。

mouseover也一样，这样就确定了是select的问题，不是trigger的问题

然后好奇是否是选择机制的问题，把文本内容删至一字母----还是三次；删完文本内容---两次，看起来似乎和select的选中有些关系，但是这和他们说的触发机制完全不同。

再试试事件问题。注释了jQ的select事件绑定，用Dom2事件绑定了一个事件，当然，要给input一个id方便获取

document.getElementById("FirstName").addEventListener(\'select\', function() {
     console.log(\'false\');
}, false);

然后一运行一点击奇迹就出现了

完全超出预期啊有没有

干脆就把捕获和目标阶段分别用Dom2级Dom0级给绑定了，为了方便查看事件触发顺序，把捕获目标冒泡打印内容分别为1 2 3.

document.getElementById("FirstName").addEventListener(\'select\', function() {
    console.log(\'1\');
}, true);

document.getElementById("FirstName").onselect=function(){
console.log(\'2\');}

document.getElementById("FirstName").addEventListener(\'select\', function() {
     console.log(\'3\');
}, false);

这次的结果是