如何在jQuery中绑定一个元素的事件，但不绑定其子元素

在这篇文章中，我们将学习如何在jQuery中为一个元素绑定一个事件，但不为其子元素绑定。我们想在父元素上添加一个事件，但不是在子元素上。

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

首先，我们使用JQuery的on()函数在包含段落元素的div元素上添加一个点击事件。
然后，为了使点击事件只对父元素起作用，我们调用一个函数，检查被点击的元素是否是父元素。如果它是一个父元素，我们就调用alert()函数。否则，我们什么都不做。
该函数看起来像这样。

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

示例 1:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
"https://code.jquery.com/jquery-3.5.0.js">
    </script>
  
    <style>
        body {
            color: green;
            font-size: 30px;
        }
  
        div {
            font-size: 40px;
        }
  
        button {
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class='parent'>
            click to see changes(parent)
            <p style="color: red;" class="child">
                This will not work(Child)
            </p>
        </div>
    </center>
  
    <script>
        $('.parent').on('click', function (e) {
            if (e.target == this) {
                alert('clicked on parent element');
            }
        });
    </script>
</body>
  
</html>

示例 2:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
"https://code.jquery.com/jquery-3.5.0.js">
    </script>
  
    <style>
        body {
            color: green;
            font-size: 30px;
        }
  
        div {
            font-size: 40px;
        }
  
        button {
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <ul>
        <li style="color: red;" class='parent'>
            click to see changes(parent)
        </li>
        <ul>
            <li class="child">This will not work(child)</li>
            <ul>
                <li>This will also not work (GrandChild)</li>
            </ul>
        </ul>
    </ul>
  
    <script>
        $('.parent').on('click', function (e) {
            if (e.target == this) {
                alert('clicked on parent element');
            }
        });
    </script>
</body>
  
</html>