td与tr，onclick与mousedown的各自执行顺序

最新推荐文章于 2022-09-05 15:31:36 发布
最新推荐文章于 2022-09-05 15:31:36 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26983555/article/details/77719336
版权

1、td与tr的执行顺序

如果程序中同时对td和tr做不同的click事件监听，不管td与tr监听事件的写法的前后顺序，程序都会先找到td的事件，然后执行td的事件，再执行tr的事件。

2、onclick与mousedown的执行顺序

onclick与mousedown：因为mousedown是监听鼠标按下的那一个时刻发生的事件，click是监听点击完成的时刻（相当于是鼠标按下后再抬起的时刻）。所以mousedown执行在onclick的前面，如果同在一个级别中，则不管在程序中写法的前后顺序。

cyqboke
关注
专栏目录
onmousedown、onmouseup 以及 onclick事件
weixin_44540155的博客
04-28 2914
onmousedown、onmouseup 以及 onclick 文献种类：专题技术文献； 开发工具与关键技术： VS JavaScript 作者：吴泽锋 撰写时间：2019年4月8日 12、onmousedown、onmouseup 以及 onclick 事件 onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。...
LV2之-----day6,7( Dom 获取与设置属性 & JS事件绑定与代理)
跛鳖千里，丘山崇成
05-06 327
LV2之-----day6,7( Dom 获取与设置属性 & JS事件 & 事件绑定) 一,DOM 获取属性与设置属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid...
[HTMLDOM]onmousedown、onmouseup 以及onclick事件触发顺序
weixin_30559481的博客
11-08 495
摘自w3school:http://www.w3school.com.cn/htmldom/dom_events.asp onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。 首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick ...
onClick和onMouseDown的区别
Queen_zdd的博客
09-09 1933
onClick:是鼠标点击弹起后触发的的事件，即一次完整的鼠标点击过程。 onMouseDown:是指鼠标按下的瞬间触发的。 onMouseUp：在鼠标弹起的时候触发；有特殊情况，不管在哪里按下，只要弹起的时候在你目标区域上，就会触发。 即onClick=onMouseDown+onMouseUp
阻止某个<td>执行<tr>的onclick事件
weixin_34302798的博客
11-16 1787
2019独角兽企业重金招聘Python工程师标准>>> ...
tr td单击事件
liyanlei的专栏
09-11 7941
tr__单击事件测试tr__单击事件测试 td__单击事件测试 Bubble就是一个事件可以从子节点向父节点传递. 当event.cancelBubble =false时，该事件会传递给父节点。会触发父节点相应的事件。 当event.cancelBubble =true时，该事件不会传递给父节点。只响应子节点对应的事件 比如
table { border-collapse: collapse; width: 100%; } td, th { border: 1.5px solid black; padding: 5px; } table img { max-width: 150px; height: auto; } <table id="myTable"> <thead class="sticky-header"> <tr> <td contenteditable="true"><input type="text" oninput="filterTable(0)" placeholder="工艺膜层"></td> <td contenteditable="true"><input type="text" oninput="filterTable(1)" placeholder="AOI Step"></td> <td contenteditable="true"><input type="text" oninput="filterTable(2)" placeholder="不良类型"></td> <td contenteditable="true"><input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"></td> <td contenteditable="true"><input type="text" oninput="filterTable(4)" placeholder="Type"></td> <td contenteditable="true"><input type="text" oninput="filterTable(5)" placeholder="Dpet"></td> <td contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="Subcode"></td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr> </thead> <tbody> <tr> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td contenteditable="true">Particle</td> </tr> </tbody> </table>这个表格怎么设置自定义调整列宽
07-16
resizer.addEventListener('mousedown', function(e) { var originalWidth = column.offsetWidth; var startX = e.pageX; document.addEventListener('mousemove', resizeColumn); document.addEventListener...
概述和HTTP请求与响应处理
热门推荐
weixin_30375427的博客
12-08 6万+
1、概述 　　爬虫，应该称为网络爬虫，也叫网页蜘蛛人，网络蚂蚁等 　　搜索引擎，就是网络爬虫的应用者 2、爬虫分类 　　通用爬虫： 　　　　常见就是搜索引擎，无差别的收集数据，存储，提交关键字，构建索引库，给用户提供搜索接口 　　　　爬取一般流程： 　　　　　　1、初始一批URL，将这些URL放到待爬的队列 　　　　　　2、从队列取出这些URL，通过DNS 解析IP ，对...
Spring与SpringMVC整合,以及实现数据库数据的增删查改和分页操作
quanwairen1的博客
09-12 1698
web.xml --------------------------------------------------------------------     xmlns="http://xmlns.jcp.org/xml/ns/javaee"     xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee      http
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鉴本</title> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border: 1px solid #ddd; } th { background-color: #f2f2f2; } table img { max-width: 150px; height: auto; } <!-- //图片大小调整 --> .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; } .popup img { max-width: 100%; max-height: 100%; cursor: zoom-out; } .sticky-header { position: sticky; top: 0; background-color: #f5f5f5; /* 可根据需要设置背景色 */ } <!-- //放大图片设置 --> </style> </head> <body> <div> <button onclick="addRow()">新增一行</button> <button onclick="addColumn()">添加一列</button> <button onclick="deleteRow()">删除行</button> <button onclick="deleteColumn()">删除列</button> <div> <div id="popup" class="popup" style="display: none;"> <img id="popupImg"> </div> <table id="myTable"> <thead> <tr> <th style="width: 20px;">列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <thead class="sticky-header"> 这样调整后列宽仍然没有变化
最新发布
07-16
column.addEventListener("mousedown", function (event) { isResizing = true; startX = event.pageX; startWidth = this.offsetWidth; }); column.addEventListener("mousemove", function (event) { if ...
TR 绑定的 onclick 事件，如何排除其中一些 TD 对onclick 事件的绑定
judyfun的专栏
01-20 9047
1111111 1111111 1111111 1111111 1111111 1111111 var td = document.getElementById("tb").getElementsByTagName("tr")[0].getElementsByTagName("td") for(var i = 0 ; i < td.length ; i ++) { td[i]
动态加入table中tr的onclick事件
lxc63lxc
01-11 177
动态加入table中tr的onclick事件 2011年08月01日 　　 　　 　　 New Document 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 ...
解决子元素click对父元素mousedown的影响
weixin_44853950的博客
03-30 2140
如题，在最子元素绑定click事件，父元素绑定mousedown事件。 由于事件冒泡的影响，当子元素触发click的时候，其父元素的mousedown也会被触发。 var big_ele = document.querySelector(".big-box"); var small_ele = document.querySelector(".small-box"); big_ele.onmous...
选中行的索引: <tr onclick="alert(this.rowIndex)"
我想我是海 冬天的大海 心情随风轻摆
04-08 1113
【MFC】Button控件和Picture Control的鼠标事件执行顺序
weixin_30746117的博客
12-30 274
1、Button控件鼠标事件执行顺序 (1) WM_LBUTTONDOWN (2) WM_LBUTTONUP (3) OnBnClickedButton1(); 2、Picture Control的鼠标事件执行顺序 (1) WM_LBUTTONDOWN (2) OnStnClickedStaticSpeak() (3) WM_LBUTTONUP 转载于:https://www....
jquery 监听td点击事件_jQuery中的属性，文档，动画以及事件
weixin_39692271的博客
11-21 350
今天是刘小爱自学Java的第86天。感谢你的观看，谢谢你。话不多说，开始今天的学习：昨天学习了jQuery中的选择器，有一些还没有学完全，只能说等到以后遇到了再查文档了。并且更令人惊讶的是，其实这只是jQuery使用文档中的一部分，还有很多很多Api。API是非常非常多的，全部学完那得花不少时间，只能说每种都学一点，学比较常见的。选择器部分算是学的差不多了，今天继续学其它部分。所有的学习步骤也就是...
失去焦点和点击事件的执行顺序 onblur/onclick
Florenza的博客
09-05 1206
再点击联想词的时候 跳转 但是 联想词的外框设置了失去焦点时候消失所以 点击联想词不生效。在点击联想词的时候使用 onmousedown。vue项目中blur和click事件冲突。
PHP里的td标签不变绿,jquery mousedown修改td的样式无效的问题解决
weixin_29504817的博客
03-26 196
jquery mousedown修改td的样式无效的问题解决//样式#right td{border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;font-size: 11px;padding: 6px 6px 6px 12px;color: #4f6b72;font-size: 15px;}td.alt{background...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值