html click事件 参数,vue 实现click同时传入事件对象和自定义参数
這篇文章主要介紹了vue 實(shí)現(xiàn)click同時(shí)傳入事件對(duì)象和自定義參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
僅僅傳入自定義參數(shù)
HTML
ddddd
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})
僅僅傳入事件對(duì)象
HTML
ddddd
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})
同時(shí)傳入事件對(duì)象和自定義參數(shù)
HTML
ddddd
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e,value){
console.log(e);
console.log(value);
}
}
})
補(bǔ)充：vue常用事件之v-on:click 以及事件對(duì)象，事件冒泡，事件默認(rèn)行為
其實(shí)v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown…….
以下click為例
注意：所有的v-on都可以簡(jiǎn)寫(xiě)為@，比如說(shuō)v-click可以簡(jiǎn)寫(xiě)為@click
1.監(jiān)聽(tīng)事件
可以用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。通常來(lái)講就是監(jiān)聽(tīng)dom觸發(fā)一些操作，這些操作(比如點(diǎn)擊)觸發(fā)后執(zhí)行的動(dòng)作(js)可有直接寫(xiě)在后面
v-on:click="item+=1"
eg:
{{item}}export default {
name: 'HelloWorld',
data () {
return {
item:1
}
}
}
結(jié)果：
可以看見(jiàn)每點(diǎn)擊一次綁定的值就增加1.也就是說(shuō)可以吧js的操作放在事件觸發(fā)的后面。但是有時(shí)候邏輯太復(fù)雜的時(shí)候?qū)懺诶锩婢蜁?huì)造成混亂，視圖和邏輯混淆。所以click后面可以接一個(gè)方法，把所有處理邏輯的方法封裝在一個(gè)函數(shù)里面click的時(shí)候調(diào)用
2.事件處理方法
v-on:click="greet"
eg：
{{res}}export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function () {
// `this` 在方法里指向當(dāng)前 Vue 實(shí)例
this.res='Hello ' + this.name + '!';
}
}
}
效果：
可以看見(jiàn)點(diǎn)擊之后執(zhí)行了greet方法里面js邏輯
3.帶參數(shù)的時(shí)間綁定方法：
同上，唯一區(qū)別是攜帶了參數(shù)
v-on:click="greet(name)"
{{res}}export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function (reccept) {
// `this` 在方法里指向當(dāng)前 Vue 實(shí)例
this.res='Hello ' + reccept+1 + '!';
}
}
}
效果一致。對(duì)方法的調(diào)用同樣可以一個(gè)方法多處多次的調(diào)用
4.內(nèi)聯(lián)處理器中的方法
也就是說(shuō)在方法里面調(diào)用其他的方法,這里的其他方法可以是js原生的方法比如阻止冒泡呀等等，也可以是自定義的方法
v-on:click="greet(name,$event)"
eg:
{{res}}export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function (reccept,event) {
if (reccept===1) this.say()
},
say:function () {
this.res="我調(diào)用了"
}
}
}
效果：
5.事件對(duì)象
$event 拿到當(dāng)前點(diǎn)擊事件的事件對(duì)象，比如click就是拿到當(dāng)前點(diǎn)擊的dom事件對(duì)象信息
v-on:click="greet($event)"
eg:
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
greet: function (ev) {
alert(ev.clientX)
}
}
}
效果：
6.事件冒泡
當(dāng)不阻止事件冒泡的時(shí)候會(huì)彈兩次
eg
點(diǎn)擊我呀export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function (ev) {
alert(1)
},
show2: function (ev1) {
alert(2)
}
}
}
那么但阻止冒泡后就只會(huì)彈一次
eg:原生js阻止冒泡
ev1.cancelBubble=true
點(diǎn)擊我呀export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function (ev) {
alert(1)
},
show2: function (ev1) {
ev1.cancelBubble=true
alert(2)
}
}
}
那么vue自己封裝的阻止冒泡方法呢？
@click.stop="show2()"
eg:
點(diǎn)擊我呀export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function () {
alert(1)
},
show2: function (ev1) {
alert(2)
}
}
}
7.阻止默認(rèn)行為：
比如：如下右鍵之后會(huì)將默認(rèn)的菜單帶出來(lái)
右鍵點(diǎn)擊我呀export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2)
}
}
}
效果：
那么就有了阻止默認(rèn)行為
ev1.preventDefault();
eg:
右鍵點(diǎn)擊我呀export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
ev1.preventDefault();
}
}
}
點(diǎn)擊后默認(rèn)菜單將不會(huì)顯示(PS早360瀏覽器右鍵無(wú)效)
vue里面的封裝的阻止默認(rèn)行為的方法：
@contextmenu.prevent="show2()"
eg:
右鍵點(diǎn)擊我呀export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
}
}
}
8.其他事件修飾符
用法都一樣就不再贅述
.capture
.self
.once
......使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 @click.prevent.self 會(huì)阻止 所有的點(diǎn)擊 ，而 @click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。
2.1.4 新增
不像其它只能對(duì)原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。如果你還沒(méi)有閱讀關(guān)于組件的文檔，現(xiàn)在大可不必?fù)?dān)心。
...Vue 為這些修飾符額外提供了 .passive 修飾符來(lái)提升移動(dòng)端的性能。
舉個(gè)例子，在滾動(dòng)的時(shí)候，瀏覽器會(huì)在整個(gè)事件處理完畢之后再觸發(fā)滾動(dòng)，因?yàn)闉g覽器并不知道這個(gè)事件是否在其處理函數(shù)中被調(diào)用了 event.preventDefault()。.passive 修飾符用來(lái)進(jìn)一步告訴瀏覽器這個(gè)事件的默認(rèn)行為不會(huì)被取消。
不要把 .passive 和 .prevent 一起使用。被動(dòng)處理函數(shù)無(wú)法阻止默認(rèn)的事件行為。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持炫H5(xyhtml5.com)。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教。
總結(jié)
以上是生活随笔為你收集整理的html click事件 参数,vue 实现click同时传入事件对象和自定义参数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： html 文本框数量加减,收藏！js实现
- 下一篇： html5倒计时秒杀怎么做,vue 设