事件冒泡导致栈内存溢出以及jquery的trigger触发事件的问题

今天遇到了一个需求
如图要求点击盒子边缘,也能触发点击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')
    })

结果达成了想要的效果