问题描述
需要单击表格中的一行，其中每个第一个单元格都包含一个链接并打开一个 url.
<tr><td><a class="fancybox" href="detail.aspx?CID=67525">LT5C260A436C41</a></td><td>更多数据</td></tr><tr><td><a class="fancybox" href="detail.aspx?CID=17522">LA5C260D436C41</a></td><td>更多数据</td></tr>...</表>完整的行应该是可点击的，而不是只有链接顶部在 fancybox 中打开详细信息页面，即在页面本身中.
所以我尝试做这样的事情:
$("table tr").bind('click',function(e) {e.stopPropagation();$(this).find("a").trigger('click');});
但似乎该事件递归地冒泡导致:
<块引用>未捕获的 RangeError:超出最大调用堆栈大小
如何以正确的方式触发对整行的点击，而不是仅触发链接，从而避免stackoverflow?
更新:我非常感谢下面的答案，但我的问题是关于触发事件，而不是执行该事件中的行为.解决方法可能很好，但在这种情况下不是.
解决方案 效果很好:
$("table tr").click(function(e) {var $link = $(this).find("a");if (e.target === $link[0]) 返回 false；$link.trigger('点击');返回假；});
为什么大多数解决方案都不起作用——它们失败了，因为当点击链接时，附加的即时处理程序会运行.然后该事件冒泡以查看处理程序是否附加到表格单元格、行等.
当您建议触发点击时，您会导致递归:点击链接→fancybox→气泡→啊哈！表格行→触发链接点击→链接被点击...
当您建议停止传播时，请注意事件停止冒泡到父元素，因此附加到 body 的 click 处理程序不会被执行.
为什么上面的代码有效——我们检查事件是否从链接冒泡.如果为真，我们只需返回并停止进一步传播.
<小时>查看更新的小提琴:http://jsfiddle.net/F5aMb/28/p>
A row in a table where each first cell contains a link needs to be clicked and open a url.
<table>
<tr>
<td><a class="fancybox" href="detail.aspx?CID=67525">LT5C260A436C41</a></td>
<td>more data</td>
</tr>
<tr>
<td><a class="fancybox" href="detail.aspx?CID=17522">LA5C260D436C41</a></td>
<td>more data</td>
</tr>
...
</table>
The complete row should be clickable instead of only the link top open the detail page in a fancybox, ie in the page itself.
So I tried to do something like this:
$("table tr").bind('click',function(e) {
e.stopPropagation();
$(this).find("a").trigger('click');
});
But it seems that the event is bubbling recursivly resulting in a:
Uncaught RangeError: Maximum call stack size exceeded
How can I trigger the click on the full row instead of only the link in a proper way avoiding the stackoverflow?
UPDATE: I really appreciate the answers below, but my question is about triggering the event, NOT executing the behaviour inside that event. Workarounds could be nice, but not in this case.
解决方案 This worked well:
$("table tr").click(function(e) {
var $link = $(this).find("a");
if (e.target === $link[0]) return false;
$link.trigger('click');
return false;
});
EDIT:
Why most solutions don't work — they fail, because when the link was clicked, the immediate handler attached runs. The event then bubbles to see if a handler was attached to a table cell, row, etc.
When you suggest triggering a click you cause the recursion: the link was clicked → fancybox → bubbles → aha! table row → trigger the link click → the link was clicked…
When you suggest to stop propagation, please note that event stops bubbling to parent elements, so a click handler attached to body will not be executed.
Why the code above works — we check if the event bubbled from a link. If true, we simply return and stop further propagation.
See the updated fiddle: http://jsfiddle.net/F5aMb/28/
这篇关于在内部元素上触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End
相关推荐
在JavaScript中，我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例： 1.使用splice()方法： let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22
前端开发问题
182
layui中表单会自动刷新的问题，因为用到layui的表单，遇到了刷新的问题所以记录一下： script layui.use(['jquery','form','layer'], function(){ var $ = layui.jquery, layer=layui.layer, form = layui.form; form.on('submit(tijiao)', function(data){ a...
2024-10-23
前端开发问题
262
在开发JS过程中，会经常遇到两个小数相运算的情况，但是运算结果却与预期不同，调试一下发现计算结果竟然有那么长一串尾巴。如下图所示： 产生原因： JavaScript对小数运算会先转成二进制，运算完毕再转回十进制，过程中会有丢失，不过不是所有的小数间运算会...
2024-10-18
前端开发问题
301
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 语法： $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18
前端开发问题
125
问题描述： 在javascript中引用js代码，然后导致反斜杠丢失，发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ，结果导致正则表达式中的\丢失。 问题原因： 该字符串含有\，javascript对字符串进行了转...
2024-10-17
前端开发问题
437
如果你想在 layui 的 table 列表中增加 edit=date 属性但不生效，可能是以下问题导致的： 1. 缺少日期组件的初始化 如果想在表格中使用日期组件，需要在页面中引入 layui 的日期组件，并初始化： script type="text/javascript" src="/layui/layui.js"/scrip...
2024-06-11
前端开发问题
455
热门文章
1错误 [ERR_REQUIRE_ESM]:不支持 ES 模块的 require()
2vue中yarn install报错：info There appears to be trouble with you
3为什么 Chrome(在 Electron 内部)会突然重定向到 chrome-error://chromewebdat
4“aria-hidden 元素不包含可聚焦元素"显示模态时的问题
5使用选择器在 CSS 中选择元素的前一个兄弟
6js报错：Uncaught SyntaxError: Unexpected string
7layui怎么刷新当前页面？
8将模式设置为“no-cors"时使用 fetch 访问 API 时出错
热门精品源码
最新VIP资源
1多功能实用站长工具箱html功能模板
2多风格简历在线生成程序网页模板
3论文相似度查询系统源码
4响应式旅游景点宣传推广页面模板
5在线起名宣传推广网站源码
6酷黑微信小程序网站开发宣传页模板
7房产销售交易中介网站模板
8小学作业自动生成程序
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)