jQuery中的多并发事件处理_Jquery

jQuery中的多并发事件处理

jquery

jQuery中的多并发事件处理,jquery,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 i

我试图使用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>


编辑一些内容
点击按钮
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（e）{
警报（'我已被单击'）；
});
$（'#编辑'）.blur（函数（e）{
警报（'我已被编辑'）
});
});

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

有人能告诉我如何实现所需的功能吗？

一种——诚然是非常粗糙的——方式是这样的：

$(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);

    });
});

不过，此示例并不阻止事件的触发。它只处理回调

这就是它的工作原理：您可以调整超时延迟，在这种情况下也不必使用

bind

这是一个有趣的问题，但我看不到任何“正确”的方法来处理这个atm，因为

blur

事件实际上是在

单击之前触发的。也许其他人有更好的主意，我不能将atm..
作为旁注：blur（）不是所有元素都支持的。较旧的浏览器仅支持输入元素的此事件。您还需要在模糊条件中将buttonClicked重置为false，但除此之外，尽管hacky这样做是可行的+非常正确-我正在更新示例。干杯谢谢，如果没有更整洁的方法来处理这个问题的话，那就应该可以了。模糊处理程序中buttonClicked为true时的“else”情况也允许我管理同时引发模糊和单击事件时的情况。