用户在父div中单击时单击按钮

Question

我有我的网络中的一些元素的代码，我想这样做：

当用户点击div时，触发div内部按钮的单击（在这种情况下，这些按钮打开一个模态），这在我创建window.location而不是触发器的页面的其他位置。 这段代码有什么不好的地方？ 我不知道:(

对不起我的英文，谢谢。

jQuery(".hover-content").click(function(e){
        var hl = jQuery(this);
        jQuery(this).find("button").each(function(){
            if(jQuery(this).is(":visible")){
                jQuery(this).trigger("click");
            }
        });
    });

控制台显示此错误：

未捕获RangeError：超出最大调用堆栈大小

小例子： https ： //jsfiddle.net/z0704nss/

Answer 1

这是因为Javascript中的事件冒泡 。
我可以通过在你的代码片段中添加e.stopPropagation()来复制和解决它。

 $(".hover-content").click(function(e){ e.preventDefault(); console.log('hi') e.stopPropagation(); $(this).find("button").each(function(){ if($(this).is(":visible")){ $(this).trigger("click"); } }); }); $('.button-ex').click(function(e){ e.preventDefault(); e.stopPropagation(); console.log('clicked button') }) 

 body { background-color: #eef; padding: 5px; } .hover-content{ background-color:#FF0000 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="hover-content"> <button id="btnOne" class="button-ex">demo1</button> <button id="btnTwo" class="button-ex">demo2</button> </div>