給div移除綁定的點擊事件,禁用div點擊事件

本文目錄一覽：

• 1、jquery怎麼讓div解綁click事件？
• 2、js 怎樣使div無法響應點擊事件
• 3、vue.js怎樣移除綁定的點擊事件

jquery怎麼讓div解綁click事件？

$(“#element”).click(function(){}); //綁定點擊事件函數

$(“#element”).unbind(); //解綁點擊事件

先簡單說下jQuery綁定和解綁點擊事件的方法

$(“#element”).click(function(){}); //綁定點擊事件函數

$(“#element”).unbind();        //解綁點擊事件

$(“#element”).click(function(){});  //綁定其它函數

即，要對一個綁定過點擊事件的元素綁定其它函數，需先對其解綁。

上面的代碼看起來好簡單，但是實際應用中卻要複雜的多。舉一個項目中的實例吧。

兩個顯示標籤雲的DIV，DIV1顯示選中的標籤，DIV2顯示可選的標籤。DIV2中的任一個標籤被點中後會從DIV2中消失並添加到DIV1中，再在DIV1點擊它時，它又會回到DIV2。兩個DIV中的標籤總數、單個標籤的內容保持不變。這個效果我花了差不多一個半小時才搞定，就是因為對jQuery綁定和解綁點擊事件理解的不到位。

我最開始的理解是：當一個標籤從DIV1中移除並添加到DIV2中時，其原來綁定的所有事件都會消失，我可以從DIV2中析取這個標籤並給它綁定新的點擊事件。結果是：再點擊它時它並沒有回到DIV1，而是還是在DIV2中，只是位置被移到了最後。我誤以為這個標籤還屬於DIV1，殊不知不是DIV的歸屬問題，而是點擊事件的綁定問題。

js 怎樣使div無法響應點擊事件

!DOCTYPE html

html lang=”en”

head

meta charset=”UTF-8″

titleDocument/title

!– 引入jquery —

script src=”js/jquery-1.7.2.min.js”/script

/head

body

ul

li第一個/li

li第二個/li

li id=”unbind”第三個/li

/ul

script

$(function(){

//給li綁定點擊事件

$(“li”).click(function(event) {

//返回當前li的索引

alert($(this).index());

});

//給id為unbind的元素刪除點擊事件

$(‘#unbind’).unbind(“click”);

})

/script

/body

/html

unbind(type [,data])     //data是要移除的函數

$(‘#btn’).unbind(“click”); //移除click

$(‘#btn’).unbind(); //移除所有

vue.js怎樣移除綁定的點擊事件

vue.js移除綁定的點擊事件的方法：

可以用 v-on 指令監聽 DOM 事件：

div id=”example”

button v-on:click=”greet”Greet/button

/div

綁定了一個單擊事件處理器到一個方法 greet。下面在 Vue 實例中定義這個方法：

var vm = new Vue({

el: ‘#example’,

data: {

name: ‘Vue.js’

},

// 在 `methods` 對象中定義方法

methods: {

greet: function (event) {

// 方法內 `this` 指向 vm

alert(‘Hello ‘ + this.name + ‘!’)

// `event` 是原生 DOM 事件

alert(event.target.tagName)

}

}

})

// 也可以在 JavaScript 代碼中調用方法

vm.greet() // – ‘Hello Vue.js!’