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

📅  最后修改于: 2021-11-24 05:33:31             🧑  作者: Mango

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

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

  • 首先,我们使用 JQuery 中的on()函数在包含段落元素的 div 元素上添加一个单击事件。
  • 然后为了使点击事件仅在父元素上有效,我们调用一个函数来检查被点击的元素是否是父元素。如果它是父级,我们调用 alert()函数。否则,我们什么都不做。
  • 该函数如下所示:
$('.parent').on('click', function(e) {
    if (e.target == this){
        alert( 'clicked on parent element' );
    }
});

示例 1:

HTML


  

    
  
    

  

    
        

GeeksforGeeks

        
            click to see changes(parent)             

                This will not work(Child)             

        
    
          


HTML


  

    
  
    

  

    

GeeksforGeeks

    
            
  •             click to see changes(parent)         
  •         
                  
    • This will not work(child)
    •             
                        
      • This will also not work (GrandChild)
      •             
              
        
          


输出:

示例 2:

HTML



  

    
  
    

  

    

GeeksforGeeks

    
            
  •             click to see changes(parent)         
  •         
                  
    • This will not work(child)
    •             
                        
      • This will also not work (GrandChild)
      •             
              
        
          

输出: