$('#parent').on('click', function() {
  // 父元素的处理逻辑
  console.log('Parent clicked');
});

$('#parent *').on('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父元素
});

$('#parent').on('click', function(e) {
  if (e.target === this) {
    // 只有当点击的是父元素本身时才执行
    console.log('Parent clicked, not a child');
  }
});

$('#parent').children().css('pointer-events', 'none');

#parent > * {
  pointer-events: none;
}

<div id="parent" style="width: 200px; height: 200px; background: lightblue; padding: 20px;">
  <button>Child Button</button>
  <a href="#">Child Link</a>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 方法1: 使用stopPropagation
$('#parent').on('click', function() {
  console.log('Parent clicked (method 1)');
});

$('#parent *').on('click', function(e) {
  e.stopPropagation();
});

// 方法2: 使用event.target检查
$('#parent').on('click', function(e) {
  if (e.target === this) {
    console.log('Parent clicked (method 2)');
  }
});

// 方法3: 使用pointer-events
$('#parent').children().css('pointer-events', 'none');
$('#parent').on('click', function() {
  console.log('Parent clicked (method 3)');
});
</script>