vue click事件获取当前元素属性

最新推荐文章于 2023-03-03 09:12:54 发布

会做饭的技术男

最新推荐文章于 2023-03-03 09:12:54 发布

阅读量3.2k

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj1ik210cjib.html

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

Vue可以传递$event对象

<body id="app">
  <ul>
    <li @click="say('hello!', $event)">点击当前行文本</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <script>
   new Vue({
       el: '#app',
       data: {
        message: 'Hello Vue.js!'
       },
       methods: {
        say: function(msg, event) {
           //获取点击对象      
           var el = event.currentTarget;
           alert("当前对象的内容："+el.innerHTML);
        }
    }
   })
  </script>
 </body>

currentTarget：currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。

通俗一点说，就是你的点击事件绑定在哪一个元素上，currentTarget获取到的就是哪一个元素。

Event对象的一些兼容性写法

//获得event对象兼容性写法
event || (event = window.event);
//获得target兼容型写法
event.target||event.srcElement
//阻止浏览器默认行为兼容性写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
//阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

会做饭的技术男

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue click事件获取当前元素属性

Vue可以传递$event对象<body id="app"> <ul> <li @click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: {
复制链接

扫一扫