为什么 jQuery 选择事件侦听器会触发多次？

Question

请在 Google Chrome 浏览器中运行this sample。

堆栈片段

$(function() {
  $(":input").select(function() {
    $("div").text("Something was selected").show().fadeOut(1000);
    alert("Selected");
  });
  $("button").click(function() {
    $(":input").select();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button>Click To Select</button>
<input type="text" value="Some text">
<div></div>

这里为什么 jQuery 选择事件监听器会触发多次？有谁知道这背后的原因？是否有任何不使用超时的解决方法？

Answer 1

$(":input") 选择器也在选择按钮，因此它会导致递归。要么只使用$("input")，要么使用$(":input:not(button)")。

我注意到当三个事件被触发时，第一个没有originalEvent 属性，所以我们绝对可以将其关闭，而后两个具有非常相似（但不相同）的时间戳。您可以将最后一个时间戳存储在某个变量中，并在事件侦听器中将其与事件的时间戳进行比较。如果这两者的取整值相同，则可以关闭此事件。

$(function() {
  var lastTimeStamp;
  $("input").select(function(event) {
    if (!event.originalEvent ||
        lastTimeStamp === Math.round(event.timeStamp)) return;
    lastTimeStamp = Math.round(event.timeStamp);
    $("div").text("Something was selected").show().fadeOut(1000);
    alert("Selected");
  });
  $("button").click(function() {
    $("input").select();
  });
});

见updated JS Fiddle。

Answer 2

问题似乎是以下几种情况的组合：

• :input 选择器获取input 和button，因此触发了多个事件。
• 即使仅使用 input 作为选择器，也会在相关元素上触发一些奇怪的事件传播，从而多次引发 select 事件处理程序。

为避免上述两种情况，请使用input 作为选择器，并在事件处理程序中使用preventDefault()。 stopPropagation() 也可能是必需的，具体取决于您的 HTML 结构。

$(function() {
    $('input').select(function(e) {
        // e.stopPropagation(); // optional
        e.preventDefault();
        $('#message').text("Something was selected").show().fadeOut(1000);
        console.log('Selected');
    });

    $('button').click(function() {
        $('input').select();
    });
});

Working example

Answer 3

更新：我们都被愚弄了。 select() 函数需要一个阻止默认值。

Rory McCrossan 想通了。干得好伙计。

顺便说一句，我不确定 select() 究竟有什么好处！像 focus() 或 on('focus',) 这样的东西可能更有意义。但是不确定上下文是什么。以下仍然是：

为什么要浪费时间使用可能会改变的通用标签/类型选择器？使用一个 ID，只选择你想要的那个。

如果要检测多个，请使用一个类。如果您想使用多个，但要弄清楚您单击了哪个，请使用一个类和一个 ID。与类绑定，并使用$this.attr('id')进行识别。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button>Click To Select</button>
<input type="text" value="Some text" id="pick-me">
<div></div>

$(function() {
  $("#pick-me").select(function(event) {
    event.preventDefault();
    $("div").text("Something was selected").show().fadeOut(1000);
    alert("Selected");
  });
  $("button").click(function() {
    $("#pick-me").select();
  });
});