1. 程式人生 > >Vue中的event阻止事件冒泡、預設事件

Vue中的event阻止事件冒泡、預設事件

vue的事件物件:

@dragstart=’drag(event)′,在函式中傳evevt ,函式中接收一下,事件物件就有了。

<div class="select-item" draggable='true' @dragstart='drag($event)' v-for="item in items">{{item.name}}    //傳輸事件物件
</div>
<script>
    var dom;
    export default{
        data(){
            return{}
        },
        methods: {  
            drag:function(event){    //接收事件物件
               dom = event.currentTarget;
            }
        }  
    }
</script>

vue中阻止事件冒泡

1、@click=’show($event)’ 有了事件物件,函式可以利用原生中的 event.cancelBubble=true;

2、@click.stop=’show()’ 只要在事件後面加 .stop 就可以阻止事件冒泡

vue的中阻止預設事件

1、@click=’show($event)’ 有了事件物件,函式就可以利用原生中的 event.preventDefault();

2、@click.prevent=’show()’ 只要在事件後面加.prevent 就可以阻止預設事件

vue的鍵盤事件:

@keydown=’show()’,我們傳個$event 也可以在函式中獲 event.keyCode 。

相關推薦

Vueevent阻止事件冒泡預設事件

vue的事件物件: @dragstart=’drag(event)′,在函式中傳evevt ,函式中接收一下,事件物件就有了。 <div class="select-item" draggable='true' @dragstart='drag($event)' v

vue.js阻止事件冒泡預設事件

首先我們來看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE瀏覽器 window.event.cancelBubble = true; //IE瀏覽器 原生

如何阻止事件冒泡預設事件

今天來看看前端的冒泡和事件預設事件如何處理1.event.stopPropagation()方法這是阻止事件的冒泡方法,不讓事件向documen上蔓延,但是預設事件任然會執行,當你掉用這個方法的時候,如果點選一個連線,這個連線仍然會被開啟,2.event.preventDef

js事件冒泡阻止事件冒泡以及阻止預設行為

這裡是修真院前端小課堂,每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能,本篇分享的是: 【 js事件冒泡、阻止事件冒泡以及阻止預設行為 】 大家好,我是IT修真院武漢分院w

事件事件物件阻止事件冒泡阻止瀏覽器預設行為Dom2級事件相容寫法

1事件物件的獲取 var e =e|event; 2事件源的獲取 var target=e.target||e.srcElemet; 3阻止事件 冒泡 e.cancelBubble=true; ie e.stoppropagation() 4阻止瀏覽器

前端(十五)—— JavaScript事件:繫結事件方式事件冒泡預設事件滑鼠事件鍵盤事件表單 事件文件事件圖片事件頁面事件

JS事件:繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件 一、事件的兩種繫結方式 ******* 1、on事件繫結方式 document.onclick = function() { console.log("文件點選"); } // on事件只

阻止事件冒泡預設行為

為使點選當前元素,只執行當前所點選元素的特定操作,可以使用阻止冒泡或者阻止預設行為。 1、阻止預設行為。preventDefault()   <!DOCTYPE html> <html lang="en">     &l

vuejs-阻止事件冒泡預設行為

一、阻止事件冒泡:   <div id="box"> <div @click="show2()"> <input type="button" value="按鈕" @click="show()"> </div>

jQuery事件冒泡事件捕獲和事件追加引發的問題

近日在專案中遇到一些問題,一個是ID值唯一存在的問題,另一個便是事件的追加產生的錯誤。 關於ID值唯一存在,從id的定義來看,id代表唯一的元素,若頁面中出現多個標籤存在相同的id,那麼此時只有第一個id所在的標籤起作用,而且會多次起作用。所以若需要多個相同的

Nginx事件處理的connection和readwrite事件的關聯

ase handle inux cycle ngx auth eof conn ont /********************************************************************* * Author : Samson

javascript-事件冒泡鼠標跟隨鍵盤跟隨鍵盤提交

事件冒泡、鼠標跟隨、鍵盤跟隨、鍵盤提交1、事件冒泡<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

vue的圖片載入與顯示預設圖片

  原部落格地址:https://www.cnblogs.com/xulei1992/p/6558294.html     <div class="content-show-img">  <div class="show-img">    <img cl

js 事件冒泡事件捕獲事件委託

事件冒泡:一直會往上觸發事件 #div1{ width: 200px; height: 200px; background-color: #00BFFF;}#div2{ width: 100px; height: 100px; background-color: #A1C

vue常用外掛(貨幣日期)

貨幣外掛: 價格格式化 // https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/currency.js const digitsRE = /(\d{3})(?=\d)/g /** * [currency 金額格式化函式] * @

事件流(事件冒泡事件捕獲以及DOM事件流)

事件流:描述的是從頁面中接收事件的順序。 事件冒泡:IE的事件流叫做事件冒泡,即事件開始時由最具體的元素(文件中巢狀層次最深的那個節點)接收,然後逐級上傳播到較為不具體的節點(文件)。 示例程式碼: <!DOCTYPE html> <html> <

js事件捕獲和事件冒泡,以及由事件冒泡引入的事件委託

事件模型 首先我們認識一下事件模型: 上圖轉自:https://zhuanlan.zhihu.com/p/26536815 由上圖所示,事件模型分為三個階段: 捕獲階段 目標階段 冒泡階段 在IE8及其以前,IE瀏覽器監聽事件的API為attac

【js操作dom物件學習筆記五之事件冒泡location物件history物件定時器】

1.總結addEventListener()和attachEvent()的區別      相同點:都可以為元素繫結事件   不同點:1.方法名不一樣          2.引數的個數不一樣addEventListener三個引數,attachEvent兩個引數        

jQuery——進階(動畫迴圈正則事件冒泡事件委託DOM)

目錄單標籤操作鏈式呼叫迴圈遍歷正則表示式事件冒泡事件委託建立標籤dom操作 特殊動畫效果 1.淡入淡出: fadeIn():淡入 fadeOut():淡出 fadeToggle():切換淡入淡出 2.顯示隱藏: show():顯示 hide():隱藏 togg

vue使用element-ui監聽鍵盤事件

  vue中element-ui在使用el-input的時候,由於el-input在輸入框的外層添加了一層的<div class="el-input"></div>,把input隱藏在子級,所以el-input新增上了keyup無響應; <el

事件冒泡捕獲和事件委託

事件冒泡與捕獲 事件冒泡:事件從觸發事件的節點開始一直向上傳播直至父節點。 事件捕獲:事件從父級節點開始一直傳遞到觸發事件的節點。 當你使用事件捕獲時,父級元素先觸發,子級元素後觸發,即div先觸發,p後觸發。 當你使用事件冒泡時,子級元素先觸發,父級元素後觸發,