如何停止.click（）？

Question

我創建了一個按鈕2按鈕。 「square」和「circle」 當我點擊正方形並點擊圓圈。廣場不能停止工作。

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

我需要做什麼？

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

如果你使用jQuery方法添加事件偵聽器.on()您可以刪除此事件偵聽器與jQuery方法.off()這樣的：

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

針對您的特殊樣機它可能看起來在某種程度上是這樣的：

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

或者你利用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>

該片段應以上說明什麼本質回事。
下面的代碼片段展示了一種高級的方式，以某種更通用的方式添加，刪除和重新添加事件偵聽器。

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

如果你需要一些進一步的解釋請隨時發表評論。