为什么此按钮的“单击”按钮的某些区域不起作用？

当鼠标指针位于下面屏幕截图中显示的位置时，为什么我的按钮的单击事件未注册？我为你创建了一个jsFiddle来测试它。请务必检查您的浏览器控制台是否有反馈。为什么此按钮的“单击”按钮的某些区域不起作用？

这里是我的代码，我使用jQuery

var clickCounter = 0; 

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

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

enter image description here

来源

2014-02-10 quelquecosa

它在的jsfiddle工作的数量在每一次点击增加了最新的浏览器。 –

@SumanBogati尝试移动你的鼠标，我可以在Chrome上重现他的问题。有一些奇怪的地方没有注册为点击。 – Danny

是的，我点击底部和顶部的按钮时，我转载它。 –

我想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）

来源

2014-02-10 18:46:35

既然你是详尽的，最后一种方式：set pointer-events：none;在.logInBtnSub类上:-) – vals

@Juan Mendes +1提供不同的场景。我尝试了第三种场景的小提琴，按钮在点击时不会移动。你能解释为什么吗？ – quelquecosa

@quelquecosa我没有解释为什么。这就是导致错误的原因，移动元素并导致鼠标移动到不同的元素。所以我删除了这个功能，但是你仍然可以解决它...这不是mouseup解决方案的好处吗？ Val还提供了一个在最新浏览器中工作的解决方案（我添加了答案） –

这个问题是一个点击是鼠标按下+鼠标松开。当你点击该区域时，你位于mousedown的子元素部分，但是在mouseup中，你位于父元素的一部分，因此没有元素可以完全点击。不知道最好的解决方法是什么，但这是问题所在。

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

有了那个注释了它的作品。

来源

2014-02-10 18:15:22 dave

您可以通过在“See Console”（它不会捕获点击）中的C之上执行mousedown，然后稍微移动鼠标（以便mouseup位于同一个元素上）来验证。解决方法可能只是使用mouseup来代替。 –

该按钮是否会因为冒泡而接收到mouseup和mousedown事件并且仍然注册点击？我添加了一个body click处理程序，当它没有触发按钮时也不会触发，这很奇怪。 –

只有当鼠标左键按下并释放在同一个对象上时，'onClick'才会触发。 Bubbling永远不会创造一个新的事件 - 它只是将一个已经存在的事件发送到元素链中。 – dave

为什么此按钮的“单击”按钮的某些区域不起作用？

回答

相关问题