How do I stop .click()?

Question

I create a button 2 button. "square" and "circle" When I click square and click circle. Square could not stop working.

<button id="square">square</button> 
<button id="circle">circle</button>

Do I need to do?

$('#square').on('click', function () { $("canvas").on({
        mousedown: function (e) {
            ...
        },
        mousemove: function (e) {
            ..
        },
        mouseup: function () {
            ..
        }
    }); });

$('#circle').on('click', function () { $("canvas").on({
        mousedown: function (e) {
            ...
        },
        mousemove: function (e) {
            ..
        },
        mouseup: function () {
            ..
        }
    }); });

Button elements have a disabled attribute available. I'd use that. — Robert Wade, Oct 15 '17 at 19:16
@Robert Wade I use this. https://jsfiddle.net/ikat/qvdwvgcs/ — Ik Kat, Oct 15 '17 at 19:24
Honestly: kinda unclear what your asking. Thats how I do understand it: you want to disable on click event on `#circle` if `#square` was clicked and vice versa. Am I right? Please clarify... — Axel, Oct 15 '17 at 20:33
Hey @IkKat please see my answer. If you miss something please feel free to leave a comment. regards :) — Axel, Oct 16 '17 at 13:58

score 0 · Answer 1 · answered Oct 16 '17 at 13:56

If you add an event listener with jQuery method .on() you can remove this event listener with jQuery method .off() like this:

$('#square').on('click', fnEventHandler); // add ONE on click event listener to #square DOM element
$('#square').off('click'); // remove ALL on click event listeners from #square DOM element

For your specific mockup it could look somehow like this:

$('#square').on('click', function() {
  console.log('button#square on click handler'); // just for debug purpose
  $('#circle').off('click'); // remove button#circle event listener
  // do what ever you want to do after click on #square eg: $("canvas").on(...)
});

$('#circle').on('click', function() {
  console.log('button#circle on click handler'); // just for debug purpose
  $('#square').off('click'); // remove button#square event listener
  // do what ever you want to do after click on #circle eg: $("canvas").on(...)
});

Please click both buttons:
<button id="square">square</button>
<button id="circle">circle</button>
<br>
To reset the behavior click "Run code snippet" again.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Or you make use of the disabled-attribute:

$('#square').on('click', function() {
  console.log('button#square on click handler'); // just for debug purpose
  $('#circle').prop('disabled', true); // disable button#circle event listener
  // do what ever you want to do after click on #square eg: $("canvas").on(...)
});

$('#circle').on('click', function() {
  console.log('button#circle on click handler'); // just for debug purpose
  $('#square').prop('disabled', true); // disable button#circle event listener
  // do what ever you want to do after click on #circle eg: $("canvas").on(...)
});

Please click both buttons:
<button id="square">square</button>
<button id="circle">circle</button>
<br>
To reset the behavior click "Run code snippet" again.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The snippets above should illustrate whats going on in essence.
The snippet below shows an advanced way to add, remove and re-add event listeners in a somehow more generic way.

(function( $ ) {

  var oHasEventListener = {},
      removeEventListener = function( sKey ) {
        // sanitize sKey first
        if ( !oOnClickHandler[ sKey ] ) {
          return console.log('sKey: "' + sKey + '" is not available'); // just for debug purpose
        }
        if ( oHasEventListener[ sKey ] ) {
          $('#' + sKey).off('click').prop('disabled', true);
          oHasEventListener[ sKey ] = false;
          console.log('button#' + sKey + ' on click listener removed'); // just for debug purpose
        }
      },
      addEventListeners = function() {
        for ( sKey in oOnClickHandler ) {
          if ( !oHasEventListener[ sKey ] ) {
            $('#' + sKey).on('click', oOnClickHandler[ sKey ]).prop('disabled', false);
            oHasEventListener[ sKey ] = true;
            console.log('button#' + sKey + ' on click listener added'); // just for debug purpose
          }
        }
      },
      oOnClickHandler = {
        square: function() {
          console.log('button#square on click event catched'); // just for debug purpose
          removeEventListener('circle');
          // do what ever you want to do after click on #square eg: $("canvas").on(...)
        },
        circle: function() {
          console.log('button#circle on click event catched'); // just for debug purpose
          removeEventListener('square');
          // do what ever you want to do after click on #circle eg: $("canvas").on(...)
        },
        reset: addEventListeners
      };

  addEventListeners(); // add event listeners on startup

})( jQuery )

<button id="square">square</button>
<button id="circle">circle</button>
<button id="reset">reset</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you need some further explanations please feel free to leave a comment.

How do I stop .click()?

1 Answers1