微信小程序开发,使用微信开发者工具。有一个viwe组件他有个点击事件用户点击会wx.navigateTo。在viwe里面有text组件内容是电话号码。现在需要给text组件添加点击事件,让用点击可以选择拨打电话或者复制电话,同时点击这个text组件是需要阻止viwe的跳转。请写出js代码并注释。
时间: 2024-03-09 13:46:04 浏览: 119
好的,针对您的问题,我给出以下的 js 代码,注释里会说明哪些代码实现了您的要求:
```js
// 获取 text 组件对应的元素节点
const textNode = document.querySelector('#text')
// 给 text 组件添加点击事件
textNode.addEventListener('click', (e) => {
e.stopPropagation() // 阻止事件冒泡,防止触发 viwe 的点击事件
// 弹出选择框,让用户选择是复制电话还是拨打电话
wx.showActionSheet({
itemList: ['拨打电话', '复制电话'],
success(res) {
const phoneNumber = textNode.innerText // 获取电话号码
if (res.tapIndex === 0) {
wx.makePhoneCall({ phoneNumber }) // 拨打电话
} else if (res.tapIndex === 1) {
wx.setClipboardData({ data: phoneNumber }) // 复制电话
}
}
})
})
```
代码中,我们首先获取了 text 组件对应的元素节点,然后给它添加了一个点击事件。在点击事件的处理函数中,我们先调用 `e.stopPropagation()` 函数阻止事件冒泡,以防止触发 viwe 的点击事件。然后使用 `wx.showActionSheet()` 函数弹出一个选择框,让用户选择是复制电话还是拨打电话。根据用户的选择,我们可以分别调用 `wx.makePhoneCall()` 函数拨打电话或者调用 `wx.setClipboardData()` 函数复制电话号码。
阅读全文