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

Question

我在绝对位置里面有一个按钮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 编写的。

Answer 1

你可以试试这个代码希望它有用

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>

Answer 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>

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

Answer 3

请注意，mousedown 不同于 click 事件，后者是在完全单击操作发生后触发的；也就是说，按下并释放鼠标按钮，同时指针保留在同一元素内。最初按下按钮时会触发 mousedown。

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

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

Why is the click event not firing?

html

javascript

css

css-position

absolute