Question

当鼠标指针位于下面屏幕截图中显示的位置时，为什么我的按钮的点击事件没有注册？我已经创建了一个jsFiddle来测试它。请务必查看浏览器的控制台以获取反馈。

这是我的代码，我正在使用jQuery

var clickCounter = 0;

$('button').click(function(){
    clickCounter++;

    console.log('times clicked: ' + clickCounter);
});

enter image description here

Answer 1

这个问题是点击是mousedown + mouseup。当您单击该区域时，您位于mousedown上的子元素的一部分中，但是在mouseup上，您位于父元素的部分中，因此没有元素获得完整的单击。不知道解决问题的最佳方法是什么，但这就是问题所在。

.logInBtn:active{
    /*top:2.2em;*/
}

随着它被注释掉它的作用。

Answer 2

我认为Dave explained the problem well您正在将元素移动到其活动状态，将元素移动到活动状态会导致mousedown转到一个元素并且mouseup转到另一个元素，因此，单击是没有触发，因为如果mouseup和mousedown在同一个元素上，操作系统只会触发一次点击。

I think the best solution is to simplify your code a lot，让按钮处理活动状态，您的样式会影响按钮的活动外观。以下CSS / HTML仍然具有活动外观，并且不会从鼠标下移动按钮，从UX角度来看这是一个坏主意。

<button id="signUpLogIn-logInBtn" class="logInBtn">
    <img src= "http://s10.postimg.org/z9yrvulut/log_In_Icon.png"/>
     Add One<p class="logInBtnSub">See Console</p>
</button>


.logInBtn {
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: 700;
    background-color: #c6c6c6; 
    box-shadow: 0 8px #878787;
    border-radius: 10px;
    color: #402a3e;
    cursor: pointer;
    text-align: center;
 }

.logInBtn img {
    width: 50px;
    height: 50px;
    display: block;
    margin: auto;
}
.logInBtnSub{
    font-size: 0.6em;
    color: #878787;     
}

以下是一些解决方法

Don't use a button, use a div（这可以在任何地方使用，但不使用按钮，因此您没有活动状态）
Don't use click, use mouseup（这不会在按钮的最顶部工作，但在其他地方工作）
Don't move the button around on its active state，如果您真的希望活动状态看起来不同，请改用边框/边距填充。
Use pointer-events: none for elements within the button这适用于我测试IE9，FF和Chrome的最新浏览器（信用到vals）

为什么这个按钮的“点击”不能在按钮的某些区域上工作？

2 个答案: