(新手篇)關於小程式中點選事件重複觸發的問題
今天碰到了點選事件重複觸發的問題
例如:我們在實現切入切出層的時候,我們點選一個按鈕想觸發我們需要的內容顯示出來,然後再把內容隱藏
有時候可能會遇到點選後重復觸發
看圖:
點了一次,然後我們想點選確定把視窗去掉 卻發現它的父元素也被觸發了
這是點選第一次的
然後再點一次 點選 確定 後內容讓內容隱藏
看!它把父元素也觸發了
來看看程式碼圖
這裡用了兩個都是bindtap
bindtap:如果實在多層巢狀的情況下同時使用bindtap方式它會造成冒泡異常
把bindtap改成catchtap就好啦!
具體什麼原因去查一下bindtap和catchtap的區別就好啦!
相關推薦
(新手篇)關於小程式中點選事件重複觸發的問題
今天碰到了點選事件重複觸發的問題 例如:我們在實現切入切出層的時候,我們點選一個按鈕想觸發我們需要的內容顯示出來,然後再把內容隱藏 有時候可能會遇到點選後重復觸發 看圖: 點了一次,然後我們想點選確定把視窗去掉 卻發現它的父元素也被觸發了 這是點選第一次的
微信小程式中點選View中任何位置都可以觸發相應事件的解決辦法
直接在這個View 裡新增事件函式,比如: <block wx:for="{{celldata}}" wx:for-item="celldata"> <view cl
微信小程式點選事件傳遞引數的方法
小程式在元件上繫結事件後,傳遞引數的方式不同於前端開發其他場景中直接加引數的方式,小程式在引數的傳遞時,採用事件物件的自定義屬性的方式,具體實現如下: wxml: <view bindtap="passQuery" data-index="1">點選事件傳參</view&g
微信小程式中點選一個按鈕獲取文字框中的值
HTML <input bindinput="talk" /> <button bindtap="oks">確認</button> JS talks:function(e){ this.setData({
微信小程式點選事件和長按事件
<button bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindlongpress="handleLo
小程式點選事件,新增class樣式
業務場景:點選對應的積分的時候,給加上顏色 實現方案:首先這三個積分型別是datas迴圈出來的,我們需要使用小程式的data-來自定義屬性,在點選不同型別的時候,獲取到對應的id,將這個id拿到js那邊重新附一個值isSelect,在進行判斷isSelect跟迴圈的
在小程式中巢狀h5頁面,點選事件不觸發
最近在寫小程式,由於小程式快滿了,就把頁面寫成h5,嵌在小程式裡,原以為很簡單,沒想到遇到問題,問題不多,但是很大 第一個就是點選事件不觸發, 場景如下: 點選按鈕觸發ajax請求,請求成功之後跳轉到另一個頁面,但是頁面始終不跳轉。 解決方法,將http開
WINFORM 程式中點選 窗體關閉按鈕事件彈提醒框
private void Form1_FormClosing(object sender,FormClosingEventArgs e){ if (DiaLogResult.OK == messageBox.Show("是否刪除","Warning",MessageBut
微信小程式點選圖片放大預覽
微信小程式點選圖片放大預覽使用到 wx.previewImage 介面,可以放大、上/下一張 上程式碼 wxml程式碼 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{i
小程式點選輪播圖跳轉到tab導航介面
需求:小程式點選輪播圖跳轉到tab導航介面,效果如下所示 點選輪播圖的圖片,跳轉到我的介面上 先實現以下的程式碼,在以下的基礎上,開始實現需求 微信小程式底部導航欄https://www.jianshu.com/p/89a63dc99839 微信小程式輪播
微信小程式——點選商品分類跳轉到該商品的商品詳情頁面(已實現)
首先,我不得不感慨下,慕課網上“7七月”老師的課真的很強大,此處放連結https://coding.imooc.com/learn/list/75.html。 我只是學習到了一半就開
微信小程式單選框自定義賦值
這裡我們應用之前一篇寫過的彈框效果 , 哈哈哈 ,是不是很萬精油;單選框我們運用偽元素自定義,不使用圖片 , 這個例子可以運用到很多情況; 知識點: 1、理解wx:if作用 2、理解三元運算子的使用 3、利用偽元素after/before自定義內容 4、定時器setTimeout的使用 照例
微信小程式點選多次navigator跳轉無反應
今天在弄微信小程式的時候使用到navigator元件實現跳轉出現了一個問題就是我點選我設定的button然後用navigator巢狀進去,當沒點選一次button就可以跳轉到相應的介面,當我重複四次的時候問題出現了,不管我怎麼點選也不會跳轉,最後還是通過百度找到了解決方案。 【程式碼展示】
小程式的冒泡事件
冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞。 非冒泡事件:當一個元件上的事件被觸發後,該事件不會向父節點傳遞。 像是下面一段程式碼 <view class="outer" bindtap='outerFun'> outer &
JS中對於for迴圈中點選事件的理解(通俗版)
在學習JS時遇到了一個問題,就是如果有多個按鈕時,我們可以通過document.getElementByTagName(“button”)的方式來獲取事件陣列,在獲取後我們需要監聽每一個按鈕是否被點選。最簡單的方式就是分開寫,一個按鈕對應一個點選事件函式,這樣雖然通俗易懂,但是這樣的程式碼量是十分大
小程式點選撥號功能
index.wxml裡程式碼如下 <button bindtap="open">點選撥號</button> 只需要新增一個觸發按鈕即可 然後index.js裡新增一個函式 open: function () { wx.showActionSheet({ it
小程式點選跳轉外部連結,計算問題,後臺解密獲取更多使用者資訊
使用場景: 小程式上體點選圖跳轉廣告(百度這種連結) 直接上程式碼: index.wxml <!--pages/index/index.wxml--> <view wx:for="{{nav}}" wx:key="{{item}}"> <i
微信小程式中的事件冒泡問題
冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞。 小程式中事件繫結對事件冒泡問題的處理: bindtap 事件繫結不會阻止冒泡事件向上冒泡 catchtap 事件繫結可以阻止冒泡事件向上冒泡 wxml: js: 父元素:touch:function(){ con
小程式點選迴圈列表裡的字型變色
這篇部落格是在上一篇部落格的基礎上改進的。上一篇是橫向滑動列表。而點選更改字型則是在此基礎上新增的新功能。直接上程式碼 js檔案: //獲取應用例項 var lists = [] Page({ /** * 頁面的初始資料 */ data: { list: [
小程式點選更多怎麼進行資料拼接
業務場景: 點選檢視更多進行資料拼接顯示 實現思路: 我們先在公共方法裡邊宣告倆個屬性,一個是頁數page,一個是每次查詢條數。 頁數預設的是第一頁