vue点击事件获取当前元素对象

女爷i 2022-01-31 00:37 517阅读 0赞

**Vue.js可以传递$event对象**

<body id="app">
      <ul>
        <li v-on: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>

我们来看一下javascript文档上有关event标准属性的介绍：

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_bubbles.asp" rel="nofollow">bubbles</a></td> 
   <td>返回布尔值，指示事件是否是起泡事件类型。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_cancelable.asp" rel="nofollow">cancelable</a></td> 
   <td>返回布尔值，指示事件是否可拥可取消的默认动作。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_currenttarget.asp" rel="nofollow">currentTarget</a></td> 
   <td><strong>返回其事件监听器触发该事件的元素。</strong></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_eventphase.asp" rel="nofollow">eventPhase</a></td> 
   <td>返回事件传播的当前阶段。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_target.asp" rel="nofollow">target</a></td> 
   <td><strong>返回触发此事件的元素（事件的目标节点）。</strong></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_timestamp.asp" rel="nofollow">timeStamp</a></td> 
   <td>返回事件生成的日期和时间。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_type.asp" rel="nofollow">type</a></td> 
   <td>返回当前 Event 对象表示的事件的名称。</td> 
  </tr> 
 </tbody> 
</table>

先来看看第三个属性：

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

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

再来看看第五个属性：

target：target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

通俗一点说，就是你当前点击的是哪一个元素，target获取到的就是哪一个元素。

<li v-for="img in willLoadImg" @click="selectImg($event)">
        <img class="loadimg" :src="img.url" :data-id="img.id"  alt="">
    </li>
    
    methods: {
        selectImg(event) {
                console.log(event.currentTarget);
                console.log(event.target);
        }
    }

**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);