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: {
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);
vue click事件获取当前元素属性的更多相关文章
- （四）Jsoup 获取 DOM 元素属性值
第一节: Jsoup 获取 DOM 元素属性值 Jsoup获取DOM元素属性值 比如我们要获取博客的href属性值: 我们这时候就要用到Jsoup来获取属性的值 : 我们给下示例代码: package ...
- Vue自定义指令获取DOM元素
我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- JAVA解析HTML，获取待定元素属性
Document doc = Jsoup.parseBodyFragment(previewHtml); //html内容解析为Document int index = 0; StringBuffer ...
- vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...
- JQuery通过click事件获取当前点击对象的id,name,value属性等
$(".test").click(function () { var val=$(this).attr("id"); })
- vue之$event获取当前元素的节点
<p @click = “clickfun($event)”>点击</p> methods: { clickfun(e) { // e.target 是你当前点击的元素 // ...
- vue click事件 v-on:click
v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Jsoup（四）-- Jsoup获取DOM元素属性值
1.获取博客园的博客标题以及博客地址,获取友情链接 2.代码实现: public static void main(String[] args) throws Exception{ // 创建http ...
随机推荐
- Linux新手随手笔记1.9-使用Apache搭建网站
搭建网站 网站服务:让用户能够通过浏览器访问到的服务器上的文档资源. 对比Windows 和Linux部署服务方法对比 Windows:IIS Linux :Apache ,nginx Ap ...
- Maximum call stack size exceeded
写vue时报了如下错误 Maximum call stack size exceeded 栈溢出,因为在调用函数时使用了递归调用,而且没有写跳出条件,导致了该错误
- git遇到的常见错误整理
远程仓库与本地代码不一致 解决: git pull --rebase git@gitee.com:l544402029/MUTAO.git 将仓库里的代码pull下来 ,然后重新进行git add ...
- 封装element-ui的dialog组件
封装组件: <template> <div class="dialog-container"> <el-dialog title="titl ...
- HTML基础笔记
html基础 (1)什么是html?超文本标记语言 用于开发网页的语言,由浏览器解释执行 (2)html文件的基本结构 <html> <head> <title>& ...
- (转载)Eclipse快捷键大全
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...
- dfs.replication、dfs.replication.min/max及dfs.safemode.threshold.pct
一.参数含义 dfs.replication:设置数据块应该被复制的份数: dfs.replication.min:所规定的数据块副本的最小份数: dfs.replication.max:所规定的数据 ...
- 实体类的状态与Hibernate缓存
一.Hibernate中实体类的三种状态 1.瞬时态 该状态下实体类对象的id属性没有值,该对象和session也没有关系. 实例: UserEntity user = new UserEntity( ...
- 【c++】流状态的查询和控制
源自 c++primer 4th, 248页 代码 #include <iostream> #include <limits> #include <stdexcept&g ...
- java.net.SocketException四大异常解决方案---转
java.net.SocketException如何才能更好的使用呢?这个就需要我们先要了解有关这个语言的相关问题.希望大家有所帮助.那么我们就来看看有关java.net.SocketExceptio ...