All geek questions in one place

Multiple concurrent event handling in jQuery

I am trying to handle multiple concurrent events using jQuery, but I am having problems with precise control when triggering events.

<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>

I want to ensure that the contents of the DIV are edited by the user and when the button is pressed so that this event is raised before the blur event on the DIV. Perhaps the button is not pressed, in which case the blur event can fire independently. As you can see, using the code above, after editing the content and pressing the button, only the blur event is triggered.

Please can someone tell me how I can achieve the desired functionality?

+3
source share
1 answer

- :

$(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 .

, "" atm., blur - click. , - , ..

+2

Source: https://habr.com/ru/post/1786374/

More articles:


All Articles