如何在 jQuery 中的元素上绑定事件而不是在其子元素上绑定事件？

在本文中，我们将学习如何在 jQuery 中将事件绑定到一个元素而不是它的子元素上。我们想在父元素上添加一个事件，而不是在子元素上。

方法：我们可以通过以下步骤完成此任务：

• 首先，我们使用 JQuery 中的on()函数在包含段落元素的 div 元素上添加一个单击事件。
• 然后为了使点击事件仅在父元素上有效，我们调用一个函数来检查被点击的元素是否是父元素。如果它是父级，我们调用 alert()函数。否则，我们什么都不做。
• 该函数如下所示：

$('.parent').on('click', function(e) {
    if (e.target == this){
        alert( 'clicked on parent element' );
    }
});

示例 1：

HTML

  

    
    
  
    
        body {
            color: green;
            font-size: 30px;
        }
  
        div {
            font-size: 40px;
        }
  
        button {
            font-size: 30px;
        }
    

  

    
        GeeksforGeeks
        
            click to see changes(parent)
            
                This will not work(Child)
            
        
    
  
    
        $('.parent').on('click', function (e) {
            if (e.target == this) {
                alert('clicked on parent element');
            }
        });
    

  

输出：

示例 2：

HTML

  

    
    
  
    
        body {
            color: green;
            font-size: 30px;
        }
  
        div {
            font-size: 40px;
        }
  
        button {
            font-size: 30px;
        }
    

  

    GeeksforGeeks
    
        
            click to see changes(parent)
        
        
            This will not work(child)
            
                This will also not work (GrandChild)
            
        
    
  
    
        $('.parent').on('click', function (e) {
            if (e.target == this) {
                alert('clicked on parent element');
            }
        });
    

  

输出：