87,907
社区成员
发帖
与我相关
我的任务
分享关于table表格td和tr单击和双击事件的问题
在tr中有一个单击和双击事件，td中有一个单击事件，连续两次点击td时发现会调用tr中的双击事件，如何进行阻止？不允许调用tr中的双击事件，希望有具体代码例子
...全文
请发表友善的回复…
发表回复
Hello World, 2019-09-10
- 打赏
- 举报
你把td的双击事件冒泡阻止了，tr的双击事件怎样触发？
没有办法避开td去双击tr的，除非仅对部份单元格设置
没有办法避开td去双击tr的，除非仅对部份单元格设置
前端_小菜鸟 2019-09-09
- 打赏
- 举报
阻止冒泡行为就可以了,单击事件的时候点击td就不会调用tr上的事件
cn00439805 2019-09-09
- 打赏
- 举报
<html>
<body>
<style>
td{background:#f60;padding:20px;}
</style>
<table>
<tr>
<td>1</td>
</tr>
</table>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
var timer1 = timer2 = null
$("table").on("click","tr",function(e){
clearTimeout(timer1)
timer1 = setTimeout(function(){
console.log("单击了tr")
},300)
})
$("table").on("click","td",function(e){
clearTimeout(timer2)
timer2 = setTimeout(function(){
console.log("单击了td")
},300)
})
$("table").on("dblclick","tr",function(e){
clearTimeout(timer1)
clearTimeout(timer2)
console.log("双击了tr")
})
$("table").on("dblclick","td",function(e){
clearTimeout(timer1)
clearTimeout(timer2)
e.stopPropagation()
console.log("双击了td")
})
</script>
</body>
</html>
天际的海浪 2019-09-09
- 打赏
- 举报
给td也加个双击事件，在td的双击事件中阻止事件冒泡event.stopPropagation()
天际的海浪 2019-09-09
- 打赏
- 举报
给td也加个双击事件，在事件阻止冒泡event.stopPropagation()
功能： 单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。 主要实现思路： 选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input输入域，动态的更新数据源代码： HTML代码： 代码如下: <table class=”editableTable”> <tr> Item1 Item2 Item3 tr> <tr> <td c
