单击父级时触发子级单击事件答案

【问题标题】：Trigger a child click event when clicking on parent单击父级时触发子级单击事件
【发布时间】：2020-07-09 20:59:37
【问题描述】：

假设你有这个 html：

<div class="parent">
    <a href="#" class="child"></a>
    <span>other elements</span>
</div>
<div class="parent">
    <a href="#" class="child"></a>
    <span>other elements</span> 
</div>

孩子有一个点击事件监听器：

$('body').on( 'click', '.child', doSomething );

如果单击父元素的任何部分，如何触发单击？我尝试过这样的事情，但它不起作用。 doSomething 函数没有被触发。

$('.parent').each( function() {
    $(this).on( 'click', function( e ){
        $(this).find('.child').triggerHandler('click');
        e.preventDefault();
    } );
});

【问题讨论】：

标签： javascript jquery onclicklistener

【解决方案1】：

这里根本不需要.each()。

您可以尝试以下方法：

$('.parent').on('click', function(e){
  $(this).find('.child').get(0).click();
  e.preventDefault();
});

$('body').on('click', '.child', doSomething);

function doSomething(e){
  console.log('Child of ' +$(e.target).parent().index() +' parent tiggered');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
    <a href="#" class="child"></a>
    <span>other elements</span>
</div>
<div class="parent">
    <a href="#" class="child"></a>
    <span>other elements</span> 
</div>

【讨论】：

【解决方案2】：

如果您想处理.parent 元素的点击，那么为什么不简单地将事件处理程序附加到.parent？

$('body').on( 'click', '.parent', doSomething);

也照jQuery documentation

在文档树顶部附近附加许多委托事件处理程序会降低性能 [...]
为获得最佳性能，请在文档位置附加委托事件尽可能靠近目标元素。避免过度使用 document 或 document.body 用于大型文档上的委派事件。

// For example, instead of 
$( "body" ).on( "click", "#commentForm .addNew", addComment )
// use 
$( "#commentForm" ).on( "click", ".addNew", addComment ).

【讨论】：

【解决方案3】：

$(document).on('click', '.parent, .child', function (event) {
   // do something

});

【讨论】：