嵌套div分别绑定不同点击触发函数是否可行？技术问询

当然可以实现！不过这里有个容易踩的小坑——事件冒泡：默认情况下，当你点击内层div时，点击事件会从触发元素（内层）向上逐层传递，导致function2()和function1()会先后被调用。要实现点击内层只触发function2()、点击外层（非内层区域）触发function1()，只需要阻止内层事件的冒泡即可。

基于你提供的内联onclick写法的修改方案 #

首先修改HTML，给内层的点击事件传递event对象（浏览器会自动生成这个事件参数）：

<div onclick="function1()">
  外层区域
  <div onclick="function2(event)">内层区域</div>
</div>

然后在JavaScript中，在function2里调用event.stopPropagation()来终止事件向上冒泡：

function function1() {
  console.log("外层div被点击");
  // 这里写外层点击的业务逻辑
}

function function2(event) {
  console.log("内层div被点击");
  // 这里写内层点击的业务逻辑
  
  // 阻止事件冒泡，避免触发外层的function1
  event.stopPropagation();
}

更推荐的事件监听写法（替代内联onclick） #

内联onclick虽然简单，但不利于代码维护和事件管理，更推荐使用addEventListener的方式：

<div class="outer-div">
  外层区域
  <div class="inner-div">内层区域</div>
</div>

// 获取DOM元素
const outerDiv = document.querySelector('.outer-div');
const innerDiv = document.querySelector('.inner-div');

// 给外层绑定点击事件
outerDiv.addEventListener('click', function1);

// 给内层绑定点击事件，并阻止冒泡
innerDiv.addEventListener('click', function(event) {
  function2();
  event.stopPropagation();
});

// 定义两个函数
function function1() {
  console.log("外层div被点击");
}

function function2() {
  console.log("内层div被点击");
}

关键知识点总结 #

• 事件冒泡：事件从触发元素向上传递到父级元素的机制，是浏览器默认的事件传播方式
• stopPropagation()：调用这个方法可以终止事件的冒泡过程，阻止父级元素的同类事件被触发
• 如果不阻止冒泡，点击内层div会先执行function2()，再执行function1()；点击外层非内层区域则只会执行function1()

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