jQuery中的多个并发事件处理

时间:2011-01-19 11:30:43

标签: jquery

我正在尝试使用jQuery处理多个并发事件,但是在事件被触发时我遇到了很好的管理问题。

<html>
  <head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  </head>
  <body>

    <div id="edit" contenteditable="true">Edit some content</div>
    <button id="button" type="button">Click the button</button>

    <script type="text/javascript">
      $(document).ready(function () {
        $('#button').click(function (e) {
          alert('I have been clicked.');
        });
        $('#edit').blur(function (e) {
          alert('I have been edited.')
        });
      });
    </script>

  </body>
</html>

我希望实现的目的是让用户编辑DIV的内容,并在单击按钮时,在DIV上的模糊事件之前引发该事件。情况可能是永远不会点击按钮,在这种情况下,模糊事件可能会自行触发。正如您使用上面的代码所看到的,编辑内容并单击按钮后,只会触发模糊事件。

有人可以建议我如何实现所需的功能吗?

1 个答案:

答案 0 :(得分:2)

一个 - 承认非常hacky - 方式看起来像这样:

$(document).ready(function() {
    var buttonClicked = false;
    $('#button').bind('click', function(e) {
        buttonClicked = true;
        alert('I have been clicked.');
    });
    $('#edit').bind('blur', function(e) {
        setTimeout(function() {
            if (!buttonClicked) alert('I have been edited.');
            buttonClicked = false;
        }, 100);

    });
});

但是,此示例并不阻止触发事件。它只处理回调。

这里有效:http://jsfiddle.net/Dp6b5/1/ 您可以调整超时延迟,在这种情况下也不一定要使用bind

这是一个有趣的问题,但我没有看到任何“正确”的方法来处理这个问题,因为blur事件事实上是在click之前被触发的。也许别人有一个更好的主意我无法看到atm ..