table表格里面td的点击冒泡事件

2024-05-26 18:18

本文主要是介绍table表格里面td的点击冒泡事件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

html部分:

<div class="wrapper"><div class="container"><table><tr><td>项目一:</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中:100 </li><li>未完成:33 </li><li>已处理问题:21 </li><li>待解决问题:23 </li></ul>						</div></td><td>项目二:</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中:100 </li><li>未完成:33 </li><li>已处理问题:21 </li><li>待解决问题:23 </li></ul>						</div></td><td>项目三:</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中:100 </li><li>未完成:33 </li><li>已处理问题:21 </li><li>待解决问题:23 </li></ul></div></td><td>项目四:</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中:100 </li><li>未完成:33 </li><li>已处理问题:21 </li><li>待解决问题:23 </li></ul>						</div></td></tr><tr><td>项目一:</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中:100 </li><li>未完成:33 </li><li>已处理问题:21 </li><li>待解决问题:23 </li></ul>						</div></td><td>项目二:</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中:100 </li><li>未完成:33 </li><li>已处理问题:21 </li><li>待解决问题:23 </li></ul>						</div></td><td>项目三:</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中:100 </li><li>未完成:33 </li><li>已处理问题:21 </li><li>待解决问题:23 </li></ul>						</div></td><td>项目四:</td><td><input type="button" class="btn" οnclick="buttonClick();" value="点击弹框" /><div class="win-con"><ul><li>进行中:100 </li><li>未完成:33 </li><li>已处理问题:21 </li><li>待解决问题:23 </li></ul></div></td></tr></table></div></div>

javascript部分:

<script>function buttonClick(){//不同浏览器对冒泡的不同处理方法if (event.stopPropagation){// this code is for Mozilla and Opera event.stopPropagation();}else if (window.event) {// this code is for IE window.event.cancelBubble = true;}//点击按钮事件:邻近的div.win-con弹出,其他位置的div隐藏$(".btn").click(function(){$(this).next(".win-con").show();$(this).parent().siblings().children(".win-con").hide();$(this).parent().parent("tr").siblings().children().children(".win-con").hide();});//点击全部dom,都会触发的事件,弹框隐藏$("body").click(function(){					$(".win-con").hide();});//点击弹出的弹框,弹框不隐藏$(".win-con").click(function(){if (event.stopPropagation){// this code is for Mozilla and Opera event.stopPropagation();}else if (window.event) {// this code is for IE window.event.cancelBubble = true;}});}</script>

css样式:

*{margin: 0;padding: 0;}ul,li{list-style: none;}html,body{width: 100%;height: 100%;}.wrapper {width: 100%;height: 100%;}.container{width: 1000px;margin: 30px auto;height: auto;}.container table {width: 100%;text-align: center;border-collapse: collapse;}.container table td {position: relative;padding: 5px;border: 1px solid #CCCCCC;}.btn {cursor: pointer;}.win-con{display: none;position: absolute;height: auto;padding: 5px;background-color: #ffffdd;border: 1px solid #F9D049;z-index: 2;}.win-con ul {padding: 10px;white-space: nowrap;text-align: left;}


还有一点儿差强人意,就是在谷歌浏览器中,第一个开始点击的时候会点击两次才会弹出弹框,IE浏览器是正常点击的,希望各位大神们给指点一二,跪谢。。。

这篇关于table表格里面td的点击冒泡事件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1005223

相关文章

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件,把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new

【测试】输入正确用户名和密码,点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题: 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定,导致点击后无法触发登录操作。 页面可能存在

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

FreeRTOS内部机制学习03(事件组内部机制)

文章目录 事件组使用的场景事件组的核心以及Set事件API做的事情事件组的特殊之处事件组为什么不关闭中断xEventGroupSetBitsFromISR内部是怎么做的? 事件组使用的场景 学校组织秋游,组长在等待: 张三:我到了 李四:我到了 王五:我到了 组长说:好,大家都到齐了,出发! 秋游回来第二天就要提交一篇心得报告,组长在焦急等待:张三、李四、王五谁先写好就交谁的

C# 防止按钮botton重复“点击”的方法

在使用C#的按钮控件的时候,经常我们想如果出现了多次点击的时候只让其在执行的时候只响应一次。这个时候很多人可能会想到使用Enable=false, 但是实际情况是还是会被多次触发,因为C#采用的是消息队列机制,这个时候我们只需要在Enable = true 之前加一句 Application.DoEvents();就能达到防止重复点击的问题。 private void btnGenerateSh

【经验交流】修复系统事件查看器启动不能时出现的4201错误

方法1,取得『%SystemRoot%\LogFiles』文件夹和『%SystemRoot%\System32\wbem』文件夹的权限(包括这两个文件夹的所有子文件夹的权限),简单点说,就是使你当前的帐户拥有这两个文件夹以及它们的子文件夹的绝对控制权限。这是最简单的方法,不少老外说,这样一弄,倒是解决了问题。不过对我的系统,没用; 方法2,以不带网络的安全模式启动,运行命令行,输入“ne

BT天堂网站挂马事件后续:“大灰狼”远控木马分析及幕后真凶调查

9月初安全团队披露bt天堂网站挂马事件,该网站被利用IE神洞CVE-2014-6332挂马,如果用户没有打补丁或开启安全软件防护,电脑会自动下载执行大灰狼远控木马程序。 鉴于bt天堂电影下载网站访问量巨大,此次挂马事件受害者甚众,安全团队专门针对该木马进行严密监控,并对其幕后真凶进行了深入调查。 一、“大灰狼”的伪装 以下是10月30日一天内大灰狼远控的木马样本截图,可以看到该木马变种数量不

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b

关于使用cspreadsheet读写EXCEL表格数据的问题

前几天项目有读写EXCEL表格的需求,我就找了大概有几种,大致分为:COM方法、ODBC方法、OLE方法、纯底层格式分析方法。由于COM方法要求必须安装有OFFICE的EXCEL组件,纯底层格式分析方法又很多功能需要自行去完善,所有最终选择了数据库的方法,用数据库的方法去存取xls格式的数据。网上有一个高手写的CSpreedSheet,看了一下提供的接口,感觉挺好用的。在使用的过程中发现几个

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{