当前位置：文江博客话题详情

Javascript - 使用哪个事件进行多选更改

发布于 2024-08-12 14:35:03 字数 307 浏览 11 评论 0原文

我使用 YUI 作为 javascript 框架，并且当用户更改基本输入字段的值时可以成功做出反应，该反应是发送 Ajax 查询。

然而，我对多选下拉列表就没那么幸运了：

每当用户向他的选择添加/删除一个项目时，收听“更改”都会发送我的查询，
收听“模糊”需要用户单击其他地方才能松开聚焦并发送查询（不是很有用），此外，如果用户仅在列表上滚动而不更改任何内容，它会发送查询（无用，令人困惑）。

有什么想法（使用 YUI）可以使用聪明的行为吗？或者我应该真正监听更改并实现超时（在发送查询之前等待后续更改）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

短暂陪伴 2024-08-19 14:35:03

我在按键事件上使用与您想要的相同类型的超时，以检测用户何时完成输入，可以对您的问题使用相同的方法：

// helper function
var timeout = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

用法：

// YUI 2
YAHOO.util.Event.addListener(oElement, "change", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}); 

// YUI 3
Y.on("click", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}, oElement);

基本上在这个 timeout 函数中，我重置了如果函数在指定的延迟之前调用，则为计时器。

I use the same kind of timeout you want on key events, to detect when the user have finished typing, the same approach can be used on your problem:

// helper function
var timeout = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Usage:

// YUI 2
YAHOO.util.Event.addListener(oElement, "change", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}); 

// YUI 3
Y.on("click", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}, oElement);

Basically in this timeout function, I reset the timer if the function is called before the specified delay.

回复收藏 0 原文

日裸衫吸 2024-08-19 14:35:03

您可以在 onChange 事件之后运行 setTimeout 并跟踪许多更改，以确定自事件触发以来是否已进行更改。如果在此时间内没有进行任何更改，则可以发送查询。

例如，类似：

var changes = 0;

function myOnChangeHandler(e)
{
  changes++;
  var local_change = changes;

  setTimeout(function() { 
    if (local_change === changes) {
      sendRequest();
    }
  }, 500);
}

you could run a setTimeout after the onChange event and keep track of a number of changes to determine whether or not a change had been made since the event was fired. if no changes were made within that time, then the query could be sent.

e.g., something like:

var changes = 0;

function myOnChangeHandler(e)
{
  changes++;
  var local_change = changes;

  setTimeout(function() { 
    if (local_change === changes) {
      sendRequest();
    }
  }, 500);
}

回复收藏 0 原文

~没有更多了~