这是一个与 CSS3 Rotate on animated element causing click event not to invoke 非常相似的问题
虽然我的问题有点不同,但无法对其发表评论以添加支持信息。
检查我的沙箱:http://jsfiddle.net/5bsG3/2/
我在鼠标悬停时围绕 Y 轴旋转的链接内有一个跨度。单击事件(用于 jQuery 或仅用于链接导航)并不总是被检测到。尝试单击链接的填充区域(就在文本之外但在链接上)。这几乎就像命中检测存在问题一样,因为跨度正在旋转,因此处于鼠标未点击跨度的 Angular 。即使鼠标仍在单击 LINK 的填充区域。 70-110 度左右的 Angular 似乎是问题所在。
上述帖子中提出的解决方案实际上并未解决此问题。此外,我的问题可能有点不同,因为我的旋转是作为 CSS 转换而不是 JS 间隔触发器处理的。
有什么想法吗?有没有人见过这个?我知道这是一种俗气的链接方式,但对于目标网站来说,这是可以接受的数量。
随意简化 jsfiddle,我从简单开始并添加了一些调试信息以帮助识别问题。
html:
<ul>
<li><a href="" class="flip-link"><span>Click this link</span></a></li>
<li id="LinkCounter">LinkClicked</li>
<li> </li>
<li id="SpanCounter">SpanClicked</li>
<ul>
CSS:
ul li
{
display: inline;
float: left ;
}
.flip-link
{
float:left ;
}
span
{
float:left ;
}
.flip-link {
display: block;
overflow: hidden;
height: 20px;
padding: 5px 50px 7px 50px ;
margin-right: 10px ;
background: #AAA;
-webkit-perspective: 50px;
-moz-perspective: 50px;
-ms-perspective: 50px;
perspective: 50px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.flip-link span {
display: block;
position: relative;
background: #EEE;
padding: 0px 10px ;
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
transition: all 1000ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-link:hover span
{
-webkit-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
-moz-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
-ms-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
color: #55FF55 ;
}
JS:
var linkClickCount = 0 ;
var spanClickCount = 0 ;
$(document).ready(function () {
$('.flip-link').click(function () {
linkClickCount++ ;
$("#LinkCounter").text(linkClickCount);
return (false);
});
$('.flip-link span').click(function () {
spanClickCount++ ;
$("#SpanCounter").text(spanClickCount);
});
});
最佳答案
问题。由于使用 CSS 的浏览器存在差异,甚至浏览器之间存在差异,因此使用纯 CSS 解决方案会遇到问题。您还必须意识到,当 div 处于动画中间时,CSS 实际上会折叠它们。我们的愿景实际上并不是正在发生的事情,它实际上是将 div 大小折叠为 0,这意味着当您单击时您将无法“实际单击它”。下面显示您应该将绝对定位的 div 作为叠加层并处理单击即使来自一个清晰、不可见的 div,它仍然会让您产生实际点击链接的错觉。
<a id="link"></a>
$("#link").click(function(){
spanClickCount++;
$("#SpanCounter").text(spanClickCount);
}
关于html - CSS3 旋转转换导致间歇性鼠标点击检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15259726/