微信小程序通過點擊事件傳參(data-)的操作示例

更新時間：2023年12月25日 11:25:37 作者：水星記_

微信小程序可以通過直接寫 data-index="1" 進行數(shù)據(jù)的綁定 ,利用 bindtap 點擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息,本文給大家介紹微信小程序通過點擊事件傳參(data-)的操作,感興趣的朋友一起看看吧

前言

大家都知道在 vue 中，我們可以直接在點擊事件中放入傳遞的參數(shù)進行傳參；然而微信小程序中并不適用這樣的寫法，但是微信小程序可以通過自定義屬性從而綁定參數(shù)使用。

data- 的用法

微信小程序可以通過直接寫 data-index="1" 進行數(shù)據(jù)的綁定，利用 bindtap 點擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息。

<view bindtap="triggers" data-idType="1">點擊我</view>

注意：

data- 是固定的寫法，- 后面可以取任意的名字，但是需要強調(diào)的是在獲取的時候要寫相對應的名字，例如：data-index = "1" ，獲取時就是 e.target.dataset.index 。

下面通過一個簡單的代碼小實例帶大家更直觀的了解 data- 的用法。

wxml文件

<!-- 按鈕觸發(fā)事件 -->
<view bindtap="triggers" data-idType="1">點擊我</view>

js文件

Page({
    data: {},
    //點擊事件
    triggers(e) {
        console.log(e.currentTarget.dataset.idtype); // 1
    },
})

如下圖：

在這里插入圖片描述

為什么有些時候 target 中也可以取到值？

在事件處理中，e.target 和 e.currentTarget 分別表示事件的目標元素和當前元素。在某些情況下，特別是當你綁定事件處理函數(shù)的元素包含子元素時，你可能會在 e.target 中找到你想要的值。

但是，需要注意的是，e.target 和 e.currentTarget 之間的區(qū)別很重要：

e.target 表示觸發(fā)事件的元素，即實際點擊的元素。
e.currentTarget 表示綁定事件處理程序的元素，即當前元素。
在你的代碼中，點擊了或元素，它們都是 e.currentTarget 的子元素，但事件實際上是在包含它們的元素上觸發(fā)的。因此，使用 e.currentTarget.dataset 更安全和可靠，因為它總是引用你綁定事件的元素的數(shù)據(jù)屬性。

雖然在某些情況下 e.target 也可以包含你想要的數(shù)據(jù)，但為了代碼的可維護性和可讀性，最好使用 e.currentTarget 來獲取數(shù)據(jù)屬性的值，因為這更符合代碼的意圖和結構。

當綁定事件處理函數(shù)的元素包含子元素時，可以通過代碼來演示 e.target 和 e.currentTarget 之間的區(qū)別。以下是一個示例：

wxml文件

<view bindtap="handleClick" data-value="Parent">
    <image src="../../assets/cheliang.png" data-value="Child"></image>
</view>

js文件

Page({
  handleClick(e) {
    console.log(e.target.dataset.value); // 輸出子元素的值
    console.log(e.currentTarget.dataset.value); // 輸出父元素的值
  }
})

在這個示例中，有一個包含圖片的 <view> 元素，點擊圖片或 <view> 元素都會觸發(fā)相同的事件處理函數(shù)。在事件處理函數(shù)中，我們可以演示兩者的區(qū)別：

當你點擊圖片時，e.target 表示圖片元素，因此 e.target.dataset.value 輸出子元素的值，即 『Child』。而 e.currentTarget 表示綁定事件的元素，因此 e.currentTarget.dataset.value 輸出父元素的值，即 『Parent』。

這個示例清晰地展示了 e.target 和 e.currentTarget 之間的區(qū)別。e.target 始終表示觸發(fā)事件的元素，而 e.currentTarget 始終表示綁定事件的元素。