vue获取点击事件源的方法

Posted summer0319

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue获取点击事件源的方法相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3     <head>
 4         <meta charset="utf-8">
 5         <title>vue click事件获取当前元素对象</title>
 6         <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
 7         <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 8     </head>
 9     <body id="app">
10         <ul>
11             <li v-on:click="say(‘hello!‘, $event)" style="background-color:blue;color:white;">点击当前行获取下一行</li>
12             <li>li2</li>
13             <li>li3</li>
14         </ul>
15         <script>
16             new Vue({
17                 el: #app,
18                 data: {
19                     message: Hello Vue.js!
20                 },
21                 methods: {
22                     say: function(msg, event) { 
23                         //获取点击对象      
24                         var el = event.currentTarget;
25                         var li2text = $(el).next().text();
26                         alert("当前对象的内容:"+$(el).text()+" 下一行内容:"+li2text);
27                     }
28                 }
29             })
30         </script>
31     </body>
32 </html>

 

以上是关于vue获取点击事件源的方法的主要内容,如果未能解决你的问题,请参考以下文章

准确获取事件源的任意父级元素(事件委托)

vue 的点击事件获取当前点击的元素方法

vue获取当前点击元素的dom对象

如何使用Vue.js中的按钮点击事件并获取按钮属性

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法

vue父组件点击触发子组件事件的实例讲解