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

Vue.js可以传递$event对象

  

    
点击当前行文本
    
li2
    
li3
  
  
 

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

属性	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。

先来看看第三个属性：

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

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

再来看看第五个属性：

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

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

for="img in willLoadImg" @click="selectImg($event)">
    


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

 

转载于:https://www.cnblogs.com/lina-xiao/p/8331529.html