Wie stoppe ich .click()?

Question

Ich erstelle eine Taste 2 Taste. "Quadrat" und "Kreis" Wenn ich quadratisch klicke und auf Kreis klicke. Square konnte nicht aufhören zu arbeiten.

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

Muss ich tun?

$('#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() { 
      .. 
     } 
    }); }); 

Answer 1

Wenn Sie ein Ereignis-Listener mit jQuery Methode hinzufügen .on() Sie dieses Ereignis-Listener mit jQuery Methode entfernen .off() wie folgt aus:

$('#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 

Für Ihre spezifischen Mockup könnte es so aussehen irgendwie:

$('#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>

Oder Sie nutzen die 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>

Die Schnipsel oben soll veranschaulichen, was ist im Wesentlichen geht.
Das folgende Snippet zeigt eine erweiterte Möglichkeit zum Hinzufügen, Entfernen und erneuten Hinzufügen von Ereignis-Listenern auf eine etwas allgemeinere Weise.

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

Wenn Sie einige weitere Erklärungen benötigen wenden Sie sich bitte einen Kommentar hinterlassen.