今天遇到了一个需求
如图要求点击盒子边缘,也能触发点击a链接跳转网页
代码结构如下:
<dd>
<a href="http://www.pvale.com/EasyDSS.html" target="_blank">EasyDSS
<div class="des">
RTMP/HTTP/HLS流媒体服务器
</div>
</a>
</dd>
外层盒子是dd标签,内层是一个a标签,a标签里面有div,写了一些文字描述.
写了一个类似的demo,使用jquery来实现效果
$('div').on("click",function(){
console.log("盒子被点击了")
$('a').trigger('click')
})
结果报错
原本是想点击外层元素触发内部元素的点击事件,但是却报错占内存溢出,仔细一想应该是事件冒泡的原因.
外层元素被点击→触发内部元素被点击→冒泡到外层元素→触发内部元素被点击,无限循环下去,导致内存溢出.
阻止事件冒泡,修改成以下代码:
$('a').click((event)=>{
event.stopPropagation();
})
$('div').on("click",function(){
$('a').trigger('click')
})
全局阻止a标签的事件冒泡,结果不报错了,但是页面不跳转.
百度之后才知道原因:
$(‘a’).trigger(‘click’)并不能触发a标签中内容的点击事件,只是相当于触发了a本身的onclick,而不是像用户点击一样的事件。
如果需要a标签的点击效果,需要把事件绑定到a标签内部的元素中才可以,正好html结构里面a标签内部有个类名.des的div标签
于是修改代码如下:
$('a').click((event)=>{
event.stopPropagation();
})
$('.black dd').on("click",function(){
$('.black dd a .des').trigger('click')
})
结果达成了想要的效果