点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)
方法一:
直接用找到对应dom元素调用.click()方法
$('.user_content').click(function(){
$(this).children()[0].click(); //Dom元素执行点击事件
//或者Dom元素执行点击事件
$(this).children('input[type="radio"]')[0].click();
}
方法二:
参考:https://blog.csdn.net/qq_37000055/article/details/101562653
html
<div class="tempStyle" @click="checked($event)">
<input class="hy-radio" type="radio" name="a"><label>选项1</label>
</div>
<div class="tempStyle" @click="checked($event)">
<input class="hy-radio" type="radio" name="a"><label>选项2</label>
</div>
对应js
method: {
checked(e) {e.currentTarget.firstElementChild.click();}
}
点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)的更多相关文章
- div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数
一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus ...
- input标签内容改变触发的事件
原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- 【转载】设置event.cancelBubble,使触发子元素的onclick不同时触发父元素的onclick
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- jQuery实现点击控制左右两边元素挤压显示效果
该功能实现的是:分左.右两边布局,左边div默认展开,左边div中有一个元素,点击实现左边div隐藏,右边div挤压过来:再点击实现左边显示,右边挤过去. 一.HTML代码: <div clas ...
- div和span元素的区别
2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素,可以与其他元素位于同一行. DIV 和 SPAN 元素最大的特点是默认都没有对元素内的 ...
- 鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
随机推荐
- vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽
刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本. 在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验 ...
- BehaviorTree.CPP行为树BT的介绍(一)
节点类型 ControlNode是可以具有1到N个子节点的节点.一旦接收到tick,tick可以传播到一个或多个子节点. DecoratorNodes与ControlNode相似,但只能有一个子节点. ...
- 【BZOJ 4668 冷战】
题目: [BZOJ 4668 冷战] 思路: 因为考虑强制在线,我们是肯定要维护形状的 我们发现如果\((u,v)\)这条边如果\(u,v\)已经连上,那么对于最终答案这条边是没有贡献的 所以我们发现 ...
- Codeforces 1158F - Density of subarrays(dp,神仙题)
Codeforces 题目传送门 & 洛谷题目传送门 人生中第一道 *3500(显然不是自己独立 AC 的),不过还是祭一下罢 神仙 D1F 首先考虑对于给定的序列 \(a_1,a_2,\do ...
- python16线程
python对于I/O密集型应用比较好,具体根据是什么类型应用来查看 对于cpu密集型应用可以借助python的一些扩展去实现 thread模块是比较早期的模块,thresding是比较新的模块,对t ...
- Web网页服务器软件——介绍
Web网页服务器软件与硬件服务器的关系,就像软件和电脑的关系. 目前有,世界使用排列第一名的Apache.还有可以在Linux系统下快速方便地搭建出LNMP Web服务环境的Nginx(其中LNMP分 ...
- gcc 的编译流程 和gdb的调试方法
GCC的编译流程分为四个步骤: 预处理(Pre-Processing) 编译(Compiling) 汇编(Assembling) 链接(Linking) 可以看的出来文件大小 gdb 调试 gdb - ...
- ArrayList总结及部分源码分析
ArrayList源码阅读笔记 1. ArrayList继承的抽象类和实现的接口 ArrayList类实现的接口 List接口:里面定义了List集合的基本接口,ArrayList进行了实现 Rand ...
- JDBC01 获取数据库连接
概述 Java Database Connectivity(JDBC)直接访问数据库,通用的SQL数据库存取和操作的公共接口,定义访问数据库的标准java类库(java.sql,javax.sql) ...
- How To Call An Ambulance
How to Talk to the Emergency Dispatcher [minutesmatter.upmc稻糠亩] How To Call An Ambulance [askambulan ...