使用CSS导致点击事件出现问题的按钮效果

所以，我试图给使用CSS的按钮添加3D效果。我给了它一个底部边框，在悬停/点击时，我改变了边框的大小，并使用相对定位将其等量推下。使用CSS导致点击事件出现问题的按钮效果

这个工作，看起来不错，但如果我点击靠近按钮的顶部边缘，点击事件不会触发 - 可能是因为按钮已移出指针的方式。

是否有另一种方式实现这种效果（纯CSS，而不是额外的标记），而不会干扰点击事件？

例子：

var initialCount = 0; 
 
window.incrementCounter = function() { 
 
    document.getElementById('counter').innerHTML = 'Counter: ' + ++initialCount; 
 
}

#counter { 
 
    margin-bottom: 1em; 
 
} 
 

 
button { 
 
    background: #ccc; 
 
    border: none; 
 
    border-bottom: 3px solid #aaa; 
 
    font-size: 16px; 
 
    padding: 5px 10px; 
 
    position: relative; 
 
} 
 

 
button:hover { 
 
    border-bottom-width: 2px; 
 
    top: 1px; 
 
} 
 

 
button:active { 
 
    border-bottom-width: 0; 
 
    top: 3px; 
 
}

<div id="counter">Counter: 0</div> 
 
<button id="button" onClick="window.incrementCounter()">Increment</button>

来源

2016-10-10 Martin Wedvich

的问题是，已经发生了click事件你绑定只触发一次成功mousedown和mouseup事件。发生事件时，目标不再是按钮（因为它已被移动）。

你最简单的解决方法是将您的incrementCounter()功能绑定到mousedown事件，而不是click，具体如下：

<button id="button" onmousedown="window.incrementCounter()">Increment</button>

请参见下面的工作演示的片段：

var initialCount = 0; 
 
window.incrementCounter = function() { 
 
    document.getElementById('counter').innerHTML = 'Counter: ' + ++initialCount; 
 
}

#counter { 
 
    margin-bottom: 1em; 
 
} 
 

 
button { 
 
    background: #ccc; 
 
    border: none; 
 
    border-bottom: 3px solid #aaa; 
 
    font-size: 16px; 
 
    padding: 5px 10px; 
 
    position: relative; 
 
} 
 

 
button:hover { 
 
    border-bottom-width: 2px; 
 
    top: 1px; 
 
} 
 

 
button:active { 
 
    border-bottom-width: 0; 
 
    top: 3px; 
 
}

<div id="counter">Counter: 0</div> 
 
<button id="button" onmousedown="window.incrementCounter()">Increment</button>

请注意，尽管如此，使用ob Trusive事件处理程序是相当糟糕的做法。你最好在DOM之外使用监听器（即直接在你的JS中）。

来源

2016-10-10 10:36:02 BenM

鼠标停止事件很好地解决了我的问题，欢呼！是的，这只是为了简化我的代码片段 - 在“真实”的应用程序中，事件处理程序通过JS绑定。 –

完全没有问题，我怀疑这可能是一个测试案例，但是我想我会提及它！很高兴有帮助。 – BenM

一个不同的解决方案是使用余量，而不是相对定位。

var initialCount = 0; 
 
window.incrementCounter = function() { 
 
    document.getElementById('counter').innerHTML = 'Counter: ' + ++initialCount; 
 
}

#counter { 
 
    margin-bottom: 1em; 
 
} 
 

 
button { 
 
    background: #ccc; 
 
    border: none; 
 
    margin-top: 0; 
 
    border-bottom: 3px solid #aaa; 
 
    font-size: 16px; 
 
    padding: 5px 10px; 
 
} 
 

 
button:hover { 
 
    border-bottom-width: 2px; 
 
    margin-top: 1px; 
 
} 
 

 
button:active { 
 
    border-bottom-width: 0; 
 
    margin-top: 3px; 
 
}

<div id="counter">Counter: 0</div> 
 
<button id="button" onmousedown="window.incrementCounter()">Increment</button>

来源

2016-10-10 11:47:51

您还可以使用w3.css在CSS。 w3.css是非常容易的样式框架。使用

<div class="w3-hover"> for hover effect.

来源

2016-10-10 11:52:32 Rahul

使用CSS导致点击事件出现问题的按钮效果

回答

相关问题