1. 程式人生 > >vue專案,在進行點選的時候,如何遮蔽掉一些小的按鈕,阻止冒泡

vue專案,在進行點選的時候,如何遮蔽掉一些小的按鈕,阻止冒泡

我們在進行表格的可點選時,前面往往帶有複選框或者收藏按鈕之類的,這時候就需要排除收藏按鈕和複選框這些類。那麼如何解決呢?採取的思路如下:

1.給複選框定義一個型別,type="selection" 

2.在點選函式中就可以使用判斷條件來進行復選框的阻止冒泡。

rowDetailShow(row, event, column) {

if(column.type !== 'selection') {

this.selectedItem = row

this.detailShow = true

}

this.tableIndex = row.tableId

},

這樣是一種方法,因為複選框一般都是與表格同步存在的。

還有一種簡單的方法,就是在@click的後面加.stop,就成了這樣,@click.stop="collectStar",這個知識點關聯的是,vue裡面的知識,在文件中的事件修飾符一欄中,我們可以看到:

<!-- 阻止單擊事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再過載頁面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 --><a v-on:click.stop.prevent
="doThat">
</a><!-- 只有修飾符 --><form v-on:submit.prevent></form><!-- 新增事件偵聽器時使用事件捕獲模式 --><div v-on:click.capture="doThis">...</div><!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回撥 --><div v-on:click.self="doThat">...</div>

這裡就先談這些,有些深層次的東西,待接觸到再深究。

相關推薦

vue專案進行的時候如何遮蔽一些按鈕阻止冒泡

我們在進行表格的可點選時,前面往往帶有複選框或者收藏按鈕之類的,這時候就需要排除收藏按鈕和複選框這些類。那麼如何解決呢?採取的思路如下: 1.給複選框定義一個型別,type="selection" 

python使用selenium webdriver百度的搜尋設定按鈕設定每頁顯示條數

要點:1. ActionChains(driver) 生成使用者行為,2.move_to_element(menu)  滑鼠移動到某個元素3.perform()  滑鼠停留4.switch_to_alert().accept() 選擇到一個警告彈窗,確認from seleni

關於Android App上線後從應用市場開啟按鈕進入應用後進行操作後home鍵到桌面後擊啟動圖示重新開啟應用的解決方法

如題所述,重新開啟應用夠噁心的了,讓人更噁心的是點選返回鍵退出後,上次點選home鍵之前的那個介面又跳出來,讓人哭笑不得,經過搜尋找到解決辦法,最後記錄在此 在應用啟動的第一個介面的onCreate方法的super.onCreate(savedInstanceState);之後呼叫下面方法

如果你是第一次接觸Python當中的面向物件進來。

2018年7月29日15:49:49 今天有時間寫一篇關於Python面向物件入門的文章,其實面向物件是不屬於某一門程式語言的,而是一種程式設計思想,如果你是第一次接觸面向物件,你需要弄懂下面幾個問題: 什麼是面向物件,為什麼要使用面向物件? 什麼是類,為什麼要使用類?

平移動畫某個控制元件讓一個view收縮到右邊螢幕展開。

最近做了一個需求。就是點選一個箭頭 ,讓一個view收縮到右邊螢幕,再點選這個View展開,其實看是收縮,其實是平移,讓這個View平移View.getWidth的寬度,同時把這個View的座標也平移過去(不平移座標,點選監聽會還在原來的位置),再讓這個View平移  —View.getW

按home鍵再次頁面按鈕回到退出頁面

第一步:去除application中的 android:launchMode=“singleTask” 第二步:然後新增:android:alwaysRetainTaskState=“true” (作用:是否保持原來的狀態。當我們按HOME鍵返回桌面,"true"表示任務棧的狀

相容IE8的頁面繫結

情況:繫結整個頁面點選事件時,IE8失效,所以做了以下相容 程式碼: 第一種:(else內的方式繫結,只有谷歌等瀏覽器可以,IE8不可以) //判斷是否為IE8(showModalDialog為IE8特有彈窗方法) if(window.showModalDialog){   &

Js實現抽獎轉盤返回某個模組頂部的功能

最近寫了幾個轉盤抽獎的活動頁面: 1.設定旋轉的角度: HTML部分:轉盤程式碼: <div class="lottery"> <div class="lottery_box"> <di

Echarts 自定義legend圖片修改之後的顏色圖解

第一個問題:echarts 可以自定義圖例的圖示,百度上很多回答都是引用的相對路徑,但是不知道為啥,我的vue專案就是引用不顯示,在network裡面找不到相應圖片 後來我想了個法子,就是先獲取到這個圖片,然後複製它的dataURL 也就是在網頁上解析之後的圖片路徑,就能正常顯示了——————至於原因,em

正在執行的android程式按home鍵之後退回到桌面再次桌面圖示避免再次重新啟動程式的終極解決辦法

在網上找了好多方法,有的說 在AndroidManifest.xml中修改,MainActivity的launchMode,去掉android:launchMode="singleTask"啟動模式即可。 AndroidManifest.xml的配置程式碼 可是我的程式碼就是這樣

android仿微信、QQ等聊天介面實現輸入框彈出軟鍵盤、其他區域收起軟鍵盤預設滑動至最低端

如圖所示,點選輸入框及選擇圖片和傳送按鈕時軟鍵盤顯示且不消失,點選其他區域,則隱藏軟鍵盤。 主要程式碼如下: override fun dispatchTouchEvent(ev: MotionEvent?): Boolean { if (ev!!.getAction() ==

Gvim雖然可以設定檔案內容自動更改但是也要滑鼠移到文字之外的區域一下文字怎麼樣不用人為操作呢?

最近在做礦山定位系統,雖然可以利用資料庫連線池頻繁操作查詢資料庫 然後把查詢的結果輸出到txt文本里,利用了GVIM文字自動更新內容; Gvim雖然可以設定檔案內容自動更改,但是也要滑鼠移到文字之外的區域,再點選一下文字,怎麼樣不用人為操作呢? 哈哈哈 百度了好久,有一個軟體叫按鍵精

頭部導航使一個欄目滑動到螢幕中間--多用於移動端

HTML程式碼: <ul class="tab-head">   <li class="tab-head-item active">心理諮詢師</li>        <li class="tab-head-item"&g

事件被循化累加呼叫一次 事件執行次數比上一次+1解決

利用jquery的unbind方法, $('#id').unbind('click').bind('click',function(){ //事件處理 }); 定義和用法 unbind() 方法移除被選元素的事件處理程式。 該方法能夠移除所有的或被選的事件處理程式,或者當事件發生

style物件的使用時背景顏色變為黃色

<!DOCTYPE html> <html lang="zh"> <head>     <meta charset="UTF-8" />     <meta name="viewport

原生JS實現一個按鈕顯示一個div按鈕div隱藏除div外其它空白處div隱藏

<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js點選按鈕顯示再點選空白地方隱藏</title> <style type="text/css"&g

listview根據條目位置彈出軟鍵盤內容不被遮擋item移動到軟鍵盤上方

ItemHeight即點選的條目的高度,對,兩行程式碼,就這麼簡單。再監聽下軟鍵盤開啟放裡面就是,百度有。原生api不懂就百度。 int y = ListView.getBottom() - ItemHeight; ListView.setSelectionFromTop(Postion + L

圖片放大縮小的程式碼段

這段js還挺常用,特此記錄。 1 <form> 2   <div> 3 <div class="form-group left"> 4 <label for="imgs" class="col-sm-3 cont

幾篇總率過10萬的帖子以及最近的幾思考

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!