点击事件被触发两次 – jquery

前端之家收集整理的这篇文章主要介绍了点击事件被触发两次 – jquery前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下简化的html:
<div class="foo" style="width:200px; height:200px;">
  <input type="checkBox" />
</div>

<script type="text/javascript">
  $('.foo').click(function(){$(this).find('input:checkBox')[0].click();});
</script>
@H_502_4@单击200×200 div’foo’效果很好,并为其中的复选框引发click事件.

@H_502_4@但是,当我完全单击复选框本身时,它会触发其“正常”事件以及上面的jquery绑定事件,这意味着复选框会自行检查,然后再次取消选中.

@H_502_4@是否有一种防止这种情况发生的整洁方法

解决方法

事件泡沫.您需要测试单击的e.target. @H_502_4@如果您只是想检查/取消选中该框,则应设置其已检查的属性.

$('.foo').click(function( e ){
    if( e.target.tagName.toUpperCase() !== 'INPUT' ) {
        var cBox = $(this).find('input:checkBox')[0];
        cBox.checked = !cBox.checked;
    } 
});
@H_502_4@编辑:修正了一些错误.

@H_502_4@工作演示:http://jsfiddle.net/LhSG9/

原文链接:https://www.f2er.com/jquery/178373.html

猜你在找的jQuery相关文章