我有一个HTML按钮，我附上一个事件，使用jQuery的bind() ，就像这样：
$('#mybutton').bind('click', myFirstHandlerFunction);
在myFirstHandlerFunction ，我想这与处理器新的处理器，以取代自身mySecondHandlerFunction ，就像这样：
function myFirstHandlerFunction(e) {
$(this).unbind('click', myFirstHandlerFunction).bind('click', mySecondHandlerFunction);
}
在第二个点击处理器， mySecondHandlerFunction ，我想切换按钮返回到原来的状态：取消绑定mySecondHandlerFunction处理程序，并重新原始处理程序myFirstHandlerFunction ，就像这样：
function mySecondHandlerFunction(e) {
$(this).unbind('click', mySecondHandlerFunction).bind('click', myFirstHandlerFunction);
}
这个伟大的工程，除了一个小细节：因为单击事件还没有通过每个按钮的点击处理程序的传播，单击事件被传递到该按钮的旁边单击处理程序，这恰好是刚势必在处理程序以前的处理程序。 最终的结果是mySecondHandlerFunction后被立即执行myFirstHandlerFunction被执行。
这个问题可以通过调用迎刃而解e.stopPropagation()在每个处理程序，但这取消可能已独立地连接任何其他点击处理程序的负面效应。
有没有一种方法，以两个click处理程序之间安全和持续切换，而无需停止click事件的传播？
更新：由于这种形式的toggle()中的jQuery 1.9移除，该解决方案下面不工作了。 见这个问题的办法。
它看起来像切换（）将解决你的问题：
$("#mybutton").toggle(myFirstHandlerFunction, mySecondHandlerFunction);
上面的代码将寄存器myFirstHandlerFunction和mySecondHandlerFunction到在交替的点击被调用。
只需使用一个布尔值来切换处理器的功能，就没有必要兼顾其处理程序监听：
$('#mybutton').bind('click', myHandlerFunction);
var first = true;
function myHandlerFunction(e) {
if(first){
// Code from the first handler here;
}else{
// Code from the second handler here;
}
first = !first; // Invert `first`
}
该解决方案是一个黑客，但它是短暂而甜蜜为你做工粗糙：
$('#myButton').click(function() {
(this.firstClk = !this.firstClk) ? firstHandler(): secondHandler();
});
这是一个黑客，因为它把一个新的属性，直接到this是点击目标HTML DOM元素，而这也许不是最好的做法。 然而，从而避免产生任何新的全局变量，并且它可以在不同的按钮同时使用不变。
需要注意的是三元操作的第一部分采用=和未==或=== ，即它是一个分配，不进行比较。 还要注意的是，第一次单击该按钮时， this.firstClk是不确定的，但立即被否定，使得三元操作的第一部分评估为true的第一次。
这里有一个工作版本：
$('#a > button').click(function() {(this.firstClk = !this.firstClk) ? a1(): a2();}); $('#b > button').click(function() {(this.firstClk = !this.firstClk) ? b1(): b2();}); function a1() {$('#a > p').text('one');} function a2() {$('#a > p').text('two');} function b1() {$('#b > p').text('ONE');} function b2() {$('#b > p').text('TWO');}
div {display: inline-block;width: 10em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a"><p>not yet clicked</p><button>click</button></div> <div id="b"><p>NOT YET CLICKED</p><button>CLICK</button></div>
我一直在寻找这个在今天，实现仍有没有办法做到这一点没有列出一个全局变量。 我想出了到位置添加到ESRI底图以下，但它通常工作太：
function addLocationClickHandler() {
var addLocationClick = overviewMap.on('click', function (event) {
addLocationClick.remove();
})
$('#locationAddButton').one('click', function (cancelEvent) {
addLocationClick.remove();
$('#locationAddButton').on('click', addLocationClickHandler)
});
}
$('#locationAddButton').on('click', addLocationClickHandler)
这应该让你把别的东西在你覆盖单击处理程序，而不是必要的全局变量的部分。
这将有助于你的按钮添加数据，点击状态属性
$(document).ready(function(){
$('#mybutton').on('click',function(){
if($(this).attr('data-click-state') == 1) {
$(this).attr('data-click-state', 0)
myFirstHandlerFunction();
} else {
$(this).attr('data-click-state', 1)
mySecondHandlerFunction();
}
});
});
像这样：
$(this).bind('click', myMasterHandler);
handler = 0;
function myMasterHandler(e) {
if(handler == 0) {
myFirstHandler(e);
handler = 1;
} else {
mySecondHandler(e);
handler = 0;
}
}
