点击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 ...
随机推荐
- DirectX12 3D 游戏开发与实战第十一章内容
仅供个人学习使用,请勿转载.谢谢! 11.模板 模板缓冲区(stencil buffer)是一种"离屏"(off-screen)缓冲区,我们可以利用它来实现一些效果.模板缓冲区.后 ...
- [Linux] 非root安装GCC9.1.0
说明 一般Linux系统自带或公共的GCC版本都很低,如目前我们的服务器版本的GCC还停留在gcc-4.9.3,而官网已到达9.2版本(下载http://ftp.gnu.org/gnu/gcc/) , ...
- linux命令行快速统计文件(压缩文件)的行数
统计(文件|压缩文件)的行数 zcat file.gz | sed -n '$=' #迅速.直接打印出多少行.-n 取消 ...
- C/C++ Qt StatusBar 底部状态栏应用
Qt窗体中默认会附加一个QstatusBar组件,状态栏组件位于主窗体的最下方,其作用是提供一个工具提示功能,当程序中有提示信息是可以动态的显示在这个区域内,状态栏组件内可以增加任何Qt中的通用组件, ...
- flask分页功能:基于flask-sqlalchemy和jinja2
先看源码: @app.route('/movie', methods=['GET', 'POST']) @app.route('/home', methods=['GET', 'POST']) @ap ...
- C#数字验证
using System; using System.Collections; using System.Configuration; using System.Data; using System. ...
- [云原生]Docker - 安装&卸载
目录 系统要求 卸载旧版本 安装Docker 方法一:通过repo安装 设置Repository 安装Docker Engine 升级Docker Engine 方法二:通过package安装 方法三 ...
- Scala(二)【基本使用】
一.变量和数据类型 1.变量 语法:val / var 变量名:变量类型 = 值 val name:String = "zhangsan" 注意 1.val定义的变量想到于java ...
- vue3 使用 data、computed、methods
简单数据ref复杂数据reactive 使用方法: // useCount.js import {ref,reactive,computed} from 'vue' export default fu ...
- 【Netty】最透彻的Netty原理架构解析
这可能是目前最透彻的Netty原理架构解析 本文基于 Netty 4.1 展开介绍相关理论模型,使用场景,基本组件.整体架构,知其然且知其所以然,希望给大家在实际开发实践.学习开源项目方面提供参考. ...