Question

我有一个网页，里面有一个按钮。我想要实现的是当用户点击div时，它会触发单击内部的按钮。代码类似于：

<div id='main'>     
 <input id="button" type="button" onclick="javascript:dosomething();"  value="submit" />
</div>


<script type="text/javascript">
    $(function(){
     $('#main').bind('click', function(){
      $('#button').trigger('click');
     })
    })
</script>

执行时（点击div），它会抛出javascript错误“太多的递归”。有点理由为什么它的无限循环，但我不确定实现这个动作的正确方法是什么？（请不要问我为什么我这么想，这不是我的代码！）

感谢您的帮助！

Answer 1

在按钮点击事件处理程序中停止event bubbling。

使用e.stopPropagation()

如果您正在使用jquery，那么以jquery方式创建所有事件处理程序。按钮点击将是

$('#button').click(function(e){
    doSomething();
    e.stopPropagation();
});

所以整个事情将是

$(function(){ 
    $('#main').bind('click', function(){ 
        $('#button').trigger('click'); 
    });

    $('#button').click(function(e){
        doSomething();
        e.stopPropagation();
    });

});

Answer 2

$("#main").on('click', function (e) {
    e.stopPropagation();
    $("#button")[0].click();
});

它为我工作

Jquery - 无限循环

2 个答案: