如何停止.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>

如果你需要一些进一步的解释请随时发表评论。