Question

我创建一个按钮2按钮。 “方形”和“圆形” 当我点击方块并单击圆圈时。 Square无法停止工作。

<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

对于您的特定模型，它可能看起来像这样：

＆＃13;

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

＆＃13;

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>

＆＃13;

或者您使用disabled-attribute：

＆＃13;

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

＆＃13;

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>

＆＃13;

上面的片段应该说明本质上是什么下面的代码段显示了以某种更通用的方式添加，删除和重新添加事件侦听器的高级方法。

＆＃13;

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

＆＃13;

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

＆＃13;

如果您需要进一步解释，请随时发表评论。

我如何停止.click（）？

1 个答案: