如何单击具有单击事件的元素下的按钮

Posted 2023-02-22

【中文标题】如何单击具有单击事件的元素下的按钮

【英文标题】：How to click button under an element that have click event as well

【发布时间】：2017-09-06 18:50:47

【问题描述】：

我有一个 html 表格。我在该表的每一行上都有点击事件。我每行有 4 个项目，下拉列表中有最后一个项目。当我点击下拉项目时，我想防止行点击，反之亦然。

<tr onclick="doSomething()">
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td onclick="doSomethingElse()">
    <!-- drop down elements -->
  </td>
</tr>

我知道一些关于 preventDefault();但不知道如何在这里使用。

【问题讨论】：

你试过玩 z-index 吗？

那是event.stopPropagation();?

是的，但它没有用。为 td onclick() 提供更大的 z-index 值

z-index 不起作用。它是一个事件。在下面检查我的答案。

【参考方案1】：

这里不需要preventDefault。您可以使用stopPropogation() 轻松实现它

 <tr onclick="doSomething()">
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td onclick="doSomethingElse(); event.stopPropagation(); ">
         <!-- drop down elements -->
    </td>
</tr>

希望对你有帮助。

【参考方案2】：

您可以将事件作为参数之一传递给 doSomething 函数，然后检查事件目标是否为父元素。看这个例子

function doSomething(e) 
    if(e.target == document.getElementById('father')) 
        //do stuff
    
;

然后在 HTML 中你只需要将事件参数添加到 javascript 函数中。

<tr id="father" onclick="doSomething(event)">
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td id="son" onclick="doSomethingElse(event)">
    <!-- drop down elements -->
  </td>
</tr>

【参考方案3】：

你需要寻找 e.target 或 Event Target 函数

function somefunction(e) 
  var target = e.target || e.srcElement;
  target.style.display= 'block';

你可能需要的其他东西

var target = event.target;
var parent = target.parentElement;//parent of "target"

【讨论】：

不，这是错误的解决方法。首先你不应该进入somefunction。