在内部元素上触发点击事件

前端开发问题 跟版网
Trigger a click event on an inner element(在内部元素上触发点击事件)
本文介绍了在内部元素上触发点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

需要单击表格中的一行，其中每个第一个单元格都包含一个链接并打开一个 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/
这篇关于在内部元素上触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

            

              

                

                  
相关文档推荐

                

                
                
                

                  

                    SCRIPT5:在 IE9 中对 xmlhttprequest 的访问被拒绝
                  

                  
SCRIPT5: Access is denied in IE9 on xmlhttprequest(SCRIPT5:在 IE9 中对 xmlhttprequest 的访问被拒绝)

                

                

                
                

                  

                    XMLHttpRequest 模块未定义/未找到
                  

                  
XMLHttpRequest module not defined/found(XMLHttpRequest 模块未定义/未找到)

                

                

                
                

                  

                    显示使用 XHR2/AJAX 下载文件的进度条
                  

                  
Show a progress bar for downloading files using XHR2/AJAX(显示使用 XHR2/AJAX 下载文件的进度条)

                

                

                
                

                  

                    如何在没有 jQuery 的情况下在 JavaScript 中打开 JSON 文件?
                  

                  
How can I open a JSON file in JavaScript without jQuery?(如何在没有 jQuery 的情况下在 JavaScript 中打开 JSON 文件?)

                

                

                
                

                  

                    如何使用 jQuery 获取 HTTP 状态码?
                  

                  
How do I get the HTTP status code with jQuery?(如何使用 jQuery 获取 HTTP 状态码?)

                

                

                
                

                  

                    “Access-Control-Allow-Origin 不允许 Origin null"在铬.为什么?
                  

                  
quot;Origin null is not allowed by Access-Control-Allow-Originquot; in Chrome. Why?(“Access-Control-Allow-Origin 不允许 Origin null在铬.为什么?)

                

                


            

          

          
          

            

               

                
                
前端开发问题Java开发问题C/C++开发问题Python开发问题C#/.NET开发问题php开发问题移动开发问题数据库问题

                

              

            

          

          
          
          

            

              

                
                
              

            

          

          
          
          

            

              

                
                
              

            

          

          
          
          

            

              

                
                

        	织梦模板
         	
        	dede
         	
        	外语学校
         	
        	竞价网站源码
         	
        	竞价培训网
         	
        	门户网站
         	
        	织梦笑话网
         	
        	dedecms笑话网
         	
        	织梦源码
         	
        	网站建设
         	
        	搞笑图片
         	
        	织梦教程
         	
        	旅游网站源码
         	
        	织梦旅游网
         	
        	学校培训
         	
        	html5
         	
        	企业织梦源码
         	
        	医院源码
         	
        	后台样式
         	
        	移动营销页
         	
        	chatgpt
         	
        	整形医院
         	
        	大学医院
         	
        	新手建站
         	
        	客服代码
         	
        	洗衣机维修
         	
        	企业网站
         	
        	淘宝客
         	
        	导航菜单
         	
        	教育网站
         	
        	学校源码
         	
        	装修网站
         	
        	装修模板
         	
        	美容整形
         	
        	女性健康
         	
        	妈妈网
         	
        	机械源码
         	
        	建站公司
         	
        	珠宝首饰
         	
        	苹果网站
         	
        	手机资讯
         	
        	管理平台
         	
        	织梦模版打包
         	
        	妇科源码
         	
        	安卓市场源码
         	
        	男性时尚网
         	
        	健康之家
         	
        	app应用网站
         	
        	笑话网站
         	
        	下载站
         	
        	车辆管理系统
         	
        	中医院网站
         	
        	家装网站源码
         	
        	QQ网站
         	
        	标牌网站
         	
        	魔兽世界网
         	
        	淘宝客源码
         	
        	YY网站源码
         	
        	别墅设计网站
         	
        	服装搭配网
         	
        	宝宝起名网
         	
        	站长网站
         	
        	婚庆网站
         	
        	脑科医院源码
         	
        	笑话源码
         	
        	肝胆医院
         	
        	意外怀孕源码
         	
        	工作室
         	
        	骨科医院
         	
        	字幕网站源码