javascript - 点击链接内的按钮

Question

我在链接 block 内有带有 js 操作的 block ，当用户用鼠标单击具有类 child_container 的 block 时(请参见代码底部)，则触发函数 parent_link_trigger 。如果我将带有 child_container 类的元素移到外部，那么很多逻辑就会被破坏，因此需要花费大量时间进行重构。这是我的代码:

<a class="parent_container" onclick="parent_link_trigger(); return false;" >
  <div><span>here some text</span>
  </div>
  <div class="child_container" onclick="children_link_trigger(); return false;">
  </div>
</a>

当鼠标点击 child_container 时，有什么方法可以调用 child_container onclick 监听器吗？

Answer 1

您必须使用 Event​.stop​Propagation() 来阻止事件在捕获和冒泡阶段进一步传播当前事件关于子函数:

function parent_link_trigger(){
  console.log('parent_link_trigger');
}
function children_link_trigger(e){
  e.stopPropagation();
  console.log('children_link_trigger');
}

<a class="parent_container" onclick="parent_link_trigger();" >
  <div><span>here some text</span>
  </div>
  <div class="child_container" onclick="children_link_trigger(event);">Child
  </div>
</a>