用onclick叠加两个元素

Overlap two elements with onclick

本文关键字：两个 元素 onclick 叠加      更新时间：2023-09-26

我有两个HTML元素，它们一个接一个出现，每个元素都有自己的onclick事件。代码示例:

<table>
  <tr>
    <td onclick="expand('table2')">
      <div>
        name<img src="img.gif" onclick="open_popup()">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <table id="table2"><tr><td>some text</td></tr></table>
    </td>
  </tr>
</table>
<script type="text/javascript">
function expand(tableid){
   $("#"+tableid).slideToggle();
}
function open_popup(){
   alert('popup opened');
}
</script>

问题是，如果我想单击图像并打开弹出窗口，它也会触发"扩展"功能，那么是否有任何方法或任何建议，我可能会使用使图像上的单击仅触发图像事件，而不触发"扩展"功能?我正在寻找一个解决方案，不需要我改变当前的布局。

我的目标是使图像点击触发open_popup()函数，而任何点击周围的图像，但在表行内，触发另一个函数。

谢谢

我认为您遇到的问题与点击事件传播有关。

你要做的是将event.stopPropagation()添加到你的函数中。所以你的函数应该是这样的:

function open_popup(event){ 
    event.stopPropagation();
    alert('popup opened');
}

这里是关于传播的更多信息的链接:事件- stopPropagation文档

相关文章：