如何让点击事件仅触发子元素.acf-field而非其父元素？

你可以通过在事件处理函数中阻止事件冒泡来解决这个问题。当点击子级.acf-field时，调用event.stopPropagation()就能阻止事件向上传递到父级的.acf-field元素，避免父级的事件处理逻辑被触发。

修改后的代码如下：

$(document).on('click', '.acf-field', function(event) {
    // 阻止事件冒泡到父元素
    event.stopPropagation();
    
    $('.acf-row').removeClass('active'); // 移除所有行的.active类
    
    $(this).closest('.acf-row').addClass('active'); 
});

原理说明：

• 事件冒泡是DOM的默认行为，触发子元素事件后，事件会沿着DOM树向上传播，触发所有父级同类型事件。
• event.stopPropagation()会终止事件的传播过程，确保只有被点击的那个.acf-field对应的事件逻辑被执行。

内容的提问来源于stack exchange，提问作者Kev