uniapp中获取点击元素的dom节点的信息

最新推荐文章于 2024-08-16 12:12:59 发布
最新推荐文章于 2024-08-16 12:12:59 发布
阅读量5k 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53987671/article/details/125395027
版权

问题：

vue框架通过@click方法获取点击元素的信息：

 

能够获取到点击img元素的信息。

uniapp框架通过@click方法获取点击元素的信息：

获取不到点击的img元素的信息

解决：

通过addEventListener设置事件监听来获取点击元素的dom节点信息

 

 

菜鸟娇嗔
关注
uni-app 获取 DOM 节点的相关信息
zuomengjia的博客
05-02 6693
uni-app 获取 DOM 节点的相关信息 一、如何获取 SelectorQuery 对象实例 let query = uni.createSelectorQuery(); 功能：返回一个selectorQuery对象的实例，该实例用来查询DOM节点的信息。 注意事项： （1）该方法需要在生命周期mounted后进行调用。 （2）nvue不支持该方法。 二、如何获取DOM节点 1、获取匹配...
uni-app获取DOM元素信息及跳到指定位置
error534的博客
03-19 3420
自己写的时候看了很多别人说的感觉一下看了难理解,所以整理一下 获取DOM元素信息 这里你想获取哪个的信息把id="target"或类放到哪里 <template> <view> <view > <view>Html</view> <view id="target">Css</view> <view">Javascript</view> </view> </temp
uniapp中节点信息的使用
最新发布
一个小白的成长历程
08-16 741
类使用web中获取节点信息的使用，相当于ref的使用
uni-app获取DOM元素
热门推荐
qq_45479398的博客
11-24 2万+
uni-app获取DOM元素 uni.createSelectorQuery().select('#reasonSelf') uni.createSelectorQuery().select('.class类名') 如果有许多相同类名的 let doms=uni.createSelectorQuery().selectAll（‘.class1’） doms.fields({ rect:true, //是否返回节点布局位置信息{left,top,right,bottom} siz
uniapp访问原生dom事件
zhtxilyj的博客
03-20 515
uniapp访问原生dom事件$event
uni-app获取元素节点信息
weixin_43697548的博客
10-18 2221
当前节点信息 处理函数 export function elementsAttr(ele,vm){ return new Promise((resolve,reject) => { let nodes= uni.createSelectorQuery().in(vm).selectAll(ele) nodes.boundingClientRect(cur=>{ resolve(cur) //返回元素节点信息 }).exec(res => { console.log
uniapp获取dom某个元素
qq_68155756的博客
03-27 3306
uniapp中想要获取dom元素不能像pc端那样获取 let button = '';//要获取的按钮 const btn = uni.createSelectorQuery().in(this); btn.select('#getPhoneButton').boundingClientRect(butn => { button = butn; //赋值 }).exec();
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
uniapp 获取元素位置信息
weixin_35755562的博客
01-03 4823
在 uniapp 中，可以使用 DOM 节点的 getBoundingClientRect() 方法来获取元素的位置信息。 该方法返回一个 DOMRect 对象，包含元素左上角和右下角在视口坐标系中的坐标。 例如，下面的代码可以获取元素的顶部位置： let element = this.$refs.myElement; let rect = element.getBoundingClientRec...
uniapp如何在手机端自定义操作DOM节点事件
毅哥哥的博客
04-06 4782
uniapp在真机上运行时是不支持js节点操作的； 我可能描述的不一定对，但是功能已经实现，欢迎指正 在uniapp官网API中有介绍 renderJS功能有两个即提高交互能力和操作DOM； 下面是我的节点拖拽功能的实现； //这是要操作的哪个节点（touchstart是鼠标按下事件）注意 //的是方法move要在renderJS <view @touchstart="renderjs.move" > 在当前vue文件另写script标签写renderJS里的事件 <script m
uniapp怎么获取遍历的dom元素
05-05
在uni-app中，可以使用 `uni.createSelectorQuery()` 方法获取指定组件的 DOM 节点信息。这个方法返回一个 SelectorQuery 对象，然后可以使用该对象的 `selectAll()` 或 `select()` 方法来选择指定的 DOM 元素。 ...
uniapp获取dom
sunluyi的博客
08-01 4571
onShow() { this.$nextTick(()=>{ let goodsVal = uni.createSelectorQuery().select(".goods-val"); goodsVal.boundingClientRect((data)=> { console.log(data) }).exec() }) },
uni-app获取dom节点信息
...
10-03 1万+
uni-app获取dom节点信息
uniapp vue3微信小程序如何获取dom元素
weixin_40323532的博客
07-10 2856
第一种方式在vue2中是可以获取到的，但是在vue3 setup中是没有this的（需要通过getCurrentInstance方法获取当前组件实例），所以这种方式排除。上面这种方式，只适合在非子组件的情况下使用，如果当前组件时作为子组件，需要通过下面的方式。这是为了更好地管理组件实例，确保组件在不同环境中的正确渲染和状态管理。第二种方式在阅览器端是可以获取到的，但是在小程序端是获取不到的，所以这种方式也排除。因为在 Vue 3 中，子组件实例不再直接暴露给全局或者父组件，而是需要通过。
uniapp中获取dom元素的方法，更改dom元素颜色（遇坑记录）
weixin_45745641的博客
02-08 1万+
最近写uniapp，遇到一个需要获取到页面中dom元素，我第一反应是使用this.$ refs进行获取，于是我开心的使用this.$refs写了很多代码，使用h5调试的过程中没有发现任何问题，但后来真机调试的时候发现在app端无效，于是我查看文档发现了：非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）
在uni-app中，操作dom
xuyan5228的博客
12-07 3863
在uni-app中，你可以通过来选择和操作DOM元素。
uni-app获取元素节点数据(H5、小程序)
weixin_44582077的博客
08-28 1万+
前言：uni-app开发中，有时候我们需要获取页面某一元素节点的一些信息数据，接下来就让我们来看看对于H5和微信小程序如何获取。 // #ifdef H5 // #ifdef 以上为成套，表示H5才能执行此代码；想要在微信小程序执行的话就需将H5换成MP 1、H5 // #ifdef H5 var left = this.$refs.refDivName[index].$el.offsetLeft // #endif 上面表示获取某元素的左边界坐标距离。refDivName就是我们想要获取的元素，给该元
uni-app元素节点操作-uni.createSelectorQuery()
u012746918的博客
03-09 7342
我们知道uniapp中式没有window对象，和dom元素的，但是有时我们需要获取页面上节点的一些几何信息，以帮助我们完成业务和功能的实现，怎么办呢？ 查阅官方文档： 在这里插入图片描述 接下来就来踩踩uniapp节点操作的坑吧 按照文档：写下如下代码，验证： <template> <view class="content"> <view class="text-area" style="position: relative;"> <text class=
uni-app(节点信息)
mengmoyong的博客
09-22 2177
类选择器名称一样的另一个盒子 </view><view class="box">获取这个盒子的宽高、位置等信息</view><view class="box">获取这个盒子的宽高、位置等信息</view><view class="box">获取这个盒子的宽高、位置等信息
如何获取uniapp中的dom元素
09-20
### 回答1： 在 uni-app 中获取 DOM 元素的方法有以下几种： 1. 使用 uni.createSelectorQuery() 函数，该函数可以帮助你在页面中查询节点信息，并返回节点对象。例如： ``` const query = uni.createSelectorQuery().select('#elementId'); query.fields({ size: true, rect: true }, (res) => { console.log(res.width, res.height); }); query.exec(); ``` 2. 在 Vue 组件中使用 $refs，例如： ``` <template> <view ref="elementId"></view> </template> <script> export default { methods: { getElement() { console.log(this.$refs.elementId); } } } </script> ``` 3. 使用 JavaScript DOM API，例如： ``` const element = document.getElementById('elementId'); console.log(element); ``` 选择哪种方法取决于你的需求和开发习惯。 ### 回答2： 在UniApp中获取DOM元素可以通过以下几种方式： 1. 使用原生小程序的API：由于UniApp底层是基于原生小程序开发的，因此你可以直接使用原生小程序提供的API来获取DOM元素。例如，可以使用`wx.createSelectorQuery().select('#id').boundingClientRect()`来获取指定id的DOM元素。 2. 使用vue的ref属性：UniApp支持使用vue的ref属性来引用DOM元素。在模板中，可以给DOM元素添加`ref`属性，并指定一个名称，如`ref="myElement"`；然后在<script>标签中，可以通过`this.$refs.myElement`来获取到DOM元素。 3. 使用页面选择器：UniApp提供了一些选择器函数来获取DOM元素，例如`uni.createSelectorQuery()`和`uni.createIntersectionObserver()`等。可以使用这些选择器函数通过类名、标签名、ID等来获取DOM元素。 4. 使用组件的事件：如果你想要获取某个组件内的DOM元素，可以使用组件的事件来传递DOM元素给父组件，然后在父组件中获取。 总结：获取UniApp中的DOM元素可以通过原生小程序的API、vue的ref属性、页面选择器和组件事件来实现。根据具体需求选择合适的方式来获取DOM元素。 ### 回答3： 在uni-app中获取DOM元素可以使用多种方法。 1. 使用v-if和v-else指令：v-if和v-else指令用于条件渲染DOM元素。我们可以结合这两个指令来根据条件显示或隐藏DOM元素。例如： ``` <view v-if="isShow">这是一个DOM元素</view> <view v-else>这是另一个DOM元素</view> ``` 在data中定义isShow变量，根据isShow的值来决定显示哪个DOM元素。 2. 使用v-show指令：v-show指令也用于条件渲染DOM元素，但是与v-if不同的是，v-show是通过CSS样式来控制元素的显示和隐藏，隐藏的元素仍然存在于DOM中。例如： ``` <view v-show="isShow">这是一个DOM元素</view> ``` 在data中定义isShow变量，根据isShow的值来决定显示或隐藏DOM元素。 3. 使用ref属性：在模板中给DOM元素添加ref属性，在Vue组件中可以通过$refs来访问DOM元素。例如： ``` <view ref="domElement">这是一个DOM元素</view> ``` 在Vue组件的方法中可以通过this.$refs.domElement来访问DOM元素。 通过以上方法，我们可以在uni-app中获取和操作DOM元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值