为什么点击事件没有触发？答案

【问题标题】：Why is the click event not firing?为什么点击事件没有触发？
【发布时间】：2021-05-27 10:39:19
【问题描述】：

我在绝对位置 div 中有一个按钮；它有一个点击处理程序，但它没有触发。我在绝对定位的 div 上也有一个 mousedown 事件。当我从父 div 中删除 mousedown 处理程序时，click 处理程序将正常工作。

这是标记和 CSS：

<div class="container">
    <div class="selection">
        <button class="close-button">✖</button>
    </div>
</div>

.selection {
    position: absolute;
    top: 303px;
    left: 92.5px;
    height: 440px;
    width: 50vw;
    background-color: blue;
    cursor: pointer;
}

.close-button {
    height: 22px;
    vertical-align: top;
    border: 0;
    background-color: transparent;
    color: white;
    font-size: 18pt;
    line-height: 20px;
    user-select: none;
    cursor: pointer;
}

按钮呈现在绝对div之上

为什么这些事件会发生冲突，我该如何解决？

-- 编辑--

我已经确认事件处理程序确实存在于 DOM 上，正如我所期望的那样。我可以从控制台手动触发它们。我的示例中没有包含事件处理程序，因为它是用 React 编写的。

【问题讨论】：

你能发布事件处理程序连接吗？
@SuperJumbo 我可以确认事件连接正确。这项工作是在 React.js 中完成的，我担心这会使问题复杂化。
反转处理程序时是否有效？将click 放在div 上，将mousedown 放在按钮上？
我知道你不想发布你的代码，如果它使事情变得复杂，但至少创建一个mcve。大多数人不会为了验证您的问题并尝试找到解决方案而编写自己的测试代码。如果您希望人们花时间帮助您而没有任何回报，您至少应该让他们尽可能轻松地这样做:)
@icecub 我将创建一个 MCVE 并更新这个问题。

标签： javascript html css css-position absolute

【解决方案1】：

请注意，mousedown 与发生完整点击操作后触发的 click 事件不同；也就是说，当指针保持在同一元素内时，按下并释放鼠标按钮。 mousedown 在按钮最初被按下的那一刻被触发。

mousedown event 在做什么？ mousedown 事件处理程序必须完成了阻止 click 工作的工作。

【讨论】：

你是对的。当我从 mousedown 监听器中删除逻辑时，问题不再出现。

【解决方案2】：

function MyClick(){
alert("Close button clicked");
}

.selection {
    position: absolute;
    top: 303px;
    left: 92.5px;
    height: 440px;
    width: 50vw;
    background-color: blue;
    cursor: pointer;
}

.close-button {
    height: 22px;
    vertical-align: top;
    border: 0;
    background-color: transparent;
    color: white;
    font-size: 18pt;
    line-height: 20px;
    user-select: none;
    cursor: pointer;
}

<div class="container">
    <div class="selection">
        <button class="close-button" onClick="MyClick()">✖</button>
    </div>
</div>

对不起，如果我错了。但是根据我对单击关闭按钮的理解，它不会触发那是您的问题，对吗？所以检查下面的代码，点击关闭按钮可以正常工作。

【讨论】：

抱歉造成混淆，但我没有在代码中包含事件监听器挂载，因为它是用 React 编写的。请假设事件处理程序已正确安装（我已经验证了这一点）。

【解决方案3】：

您可以尝试使用此代码希望它有效

Html代码是这样的

<div class="container">
    <div class="main_section">
        <div class="selection"></div> 
        <button class="close-button">✖</button>
    </div>  
</div>

你可以用这个css

<style>
.main_section {
    position: absolute;
    top: 303px;
    left: 92.5px;
    height: 440px;
    width: 50vw;
    cursor: pointer;
}
.selection{ 
    height: 100%;
    width: 100%;
    background-color: blue;
    z-index:1;
    position: absolute;
}
.close-button {
    height: 22px;
    vertical-align: top;
    border: 0;
    background-color: transparent;
    color: white;
    font-size: 18pt;
    line-height: 20px;
    user-select: none;
    cursor: pointer;
    z-index:2;
    position: absolute;
}
</style>

并添加此点击事件

<script>
$(document).ready(function(){
  $(".close-button").click(function(){
    alert("Hello");
  });
  $( ".selection" ).mousedown(function() {
    alert( "Handler for .mousedown() called." );
  });
});
</script>

【讨论】：