2
\$\begingroup\$

I had posted this question in Stack Overflow and they told me it would be better served on Code Review.

Is there a more effecient way of changing the mouseout state when a button is clicked? When a button is clicked I want the image in the click event to take precedence over the image in the mouseout event. The following code works but I'm not sure if nesting events is a good practice.

$("#targetBtn").on({
  "mouseover" : function() {
    $(this).find('img').attr('src', 'images/_hover.png');
  },
 "mouseout" : function() {
    $(this).find('img').attr('src', 'images/_mouseout.png');
 },
 "click" : function() {
   $(this).find('img').attr('src', 'images/_selected.png');
   $(this).mouseout(function() {
      $(this).find('img').attr('src', 'images/_selected.png');
   });
  }
});

If anyone could refactor this code and show me a better way of doing this it would be greatly appreciated. Also if someone could explain why nesting events is bad (if indeed it is) I would appreciate that as well.

\$\endgroup\$
  • 1
    \$\begingroup\$ Wait, why are you using jQuery and then just a few lines later using querySelector? \$\endgroup\$ – Downgoat Mar 16 '16 at 15:11
  • \$\begingroup\$ sorry. I'm new to` JQuery` and I was just told in stackoverflow that its a bad practice. Why is it a bad practice if JQuery is just a= Javascript` library? \$\endgroup\$ – webDev Mar 16 '16 at 15:14
7
\$\begingroup\$

It is bad practice as you add a new handler each time your event is fired.

To better understand this, try this:

$('p')
  .on('click', function(e) {
    console.log('1');
    $(this).on('click', function(e) {
      console.log('2');
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  click me
</p>

Each time you click "click me", it should log one more "2".

A better way is to refactor your code to use a flag

(function() {
    var flag = true;

    $('#targetBtn')
        .on('mouseover', function(e) {
            $(this).find('img').attr('src', 'images/_hover.png');
        })
        .on('mouseout', function(e) {
            if(flag)
                $(this).find('img').attr('src', 'images/_mouseout.png');
            else
                $(this).find('img').attr('src', 'images/_selected.png');

            // or
            // $(this).find('img').attr('src', (flag ? 'images/_mouseout.png' : 'images/_selected.png'));
        })
        .on('click', function(e) {
            flag = false;
            $(this).find('img').attr('src', 'images/_selected.png');
        });
})();

See this demonstration to grasp the result:

(function() {
  var flag = true;

  $('#targetBtn')
    .on('mouseover', function(e) {
      console.log('src', 'images/_hover.png');
    })
    .on('mouseout', function(e) {
      if (flag)
        console.log('src', 'images/_mouseout.png');
      else
        console.log('src', 'images/_selected.png');

      // or
      //console.log('src', (flag ? 'images/_mouseout.png' : 'images/_selected.png'));
    })
    .on('click', function(e) {
      flag = false;
      console.log('src', 'images/_selected.png');
    });
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="targetBtn">btn</a>

\$\endgroup\$
  • \$\begingroup\$ Awesome explained. I hope you write more here. \$\endgroup\$ – michael.zech Mar 18 '16 at 6:54
  • \$\begingroup\$ I would invert the sense of the flag, initialize it to false, and rename it to buttonHasBeenClicked. \$\endgroup\$ – 200_success Mar 31 '16 at 11:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.