Question

我有两个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（）函数，同时在图像周围任何点击，但在表格行内，触发其他功能。

谢谢

Answer 1

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

您要做的是将event.stopPropagation（）添加到您的函数中。所以你的功能应该是这样的：

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

以下是有关传播的更多信息的链接： Event - stopPropagation Docs

用onclick重叠两个元素

1 个答案: