js之綁定到div上面的事件如何取消

場景：最常見的一種場景就是按鈕點擊。如果按鈕點擊之后要發生變化的話。會由可點變為不可點。

思路：

一、首先會想到如果把綁定事件的class remove掉的話，是不是可以。
二、可以查看是否可以禁用點擊事件實現。
三、可以添加一個class。在另外的class上面阻止其他點擊事件。
即return false。

思路一實現：

//寫法一：
$("body").on('click',".J_toShake", function (e) {
	$(this).addClass("gray").removeClass("J_toShake").html("已搖獎");
});

//寫法二：
$(".J_toShake").on('click',function (e) {
	$(this).addClass("gray").removeClass("J_toShake").html("已搖獎");
});
//寫法三：
$("body .J_toShake").on('click',function (e) {
	$(this).addClass("gray").removeClass("J_toShake").html("已搖獎");
});

寫法一可用。寫法二、三不可用。
原因分析：
直接綁定元素上面。會在緩存中存住這個事件元素。如果后期想去掉元素上面的事件。如果是直接刪除id或者是class是不能實現的。
然而如果是綁定到body的話。后期捕獲到元素上面的話就是可以的。

思路二實現：

	var clicked=false;
	// 點擊去搖獎
	$(".J_toShake").on('click',function (e) {
		if(clicked){
                         //移除指定的事件函數
			//$(this).off(e);
                        //移除click事件處理程序
                        //$(this).off("click");

			return;
		}
		$(this).addClass("gray").removeClass("J_toShake").html("已搖獎");
		clicked=true;
	});

思路三實現：

	var clicked=false;
	// 點擊去搖獎
	$(".J_toShake").on('click',function (e) {
		if(clicked){
                         //移除指定的事件函數
			//$(this).off(e);
                        //移除click事件處理程序
                        //$(this).off("click");

			return;
		}
		$(this).addClass("gray").removeClass("J_toShake").html("已搖獎");
		clicked=true;
	});