好吧,这个问题给我带来了很多问题.
当使用css3 -webkit-transform样式和任何类型的3d旋转(例如rotateY(30deg))时,将click事件绑定到此旋转对象是极不可靠的.
请参阅下面的示例代码或查看this fiddle(要查看小提琴中的不可靠性,请单击元素的右侧).此示例没有动画但仍受影响.
HTML:
<div id='Box1'>Click this Box.</div>
CSS:
#Box1{ -webkit-transform: rotateY(30deg); }
jQuery的:
$('#Box1').click(function(){ alert('clicked Box 1'); });
我的意思是’不可靠’是不会总是抛出click事件(取决于你点击它的位置),有时事件根本不会抛出(无论你在哪里点击它).
有没有办法来修复或避免这种情况,以便在旋转和动画时使用CSS3元素?
更新:
在元素上使用CSS属性“float:left”似乎允许它在不运动时正确检测点击事件.有谁知道为什么浮动属性修复了这个?
我的最终目标是让对象在运动中接收点击事件,但是,当我应用新的CSS3 rotate3d属性(实时,在另一个jquery事件上)来给对象动画时,click事件再次开始失败.
解决方法
我似乎无法复制问题,它似乎在添加浮动后正常工作:left;.
有时浏览器在渲染HTML元素的实际宽度时表现得很有趣. float:left似乎让浏览器计算得更好.
这是JavaScript:
$(document).ready(function (){ $('#Box1').bind({ 'click' : function () { alert('clicked Box 1'); },'hover' : function () { console.log('Over Box 1'); } }); $('#Box2').click(function(){ alert('clicked Box 2'); }); window.angle = 0; setInterval(function () { if (window.angle >= 360) { window.angle = 0; } else { window.angle += 5; } $('#Box1').css('-webkit-transform','rotateY(' + window.angle + 'deg)'); },100); });
这是一个动画的更新小提琴,似乎工作正常:http://jsfiddle.net/RyvtZ/9/
(我在悬停时添加了console.log以简化生活;))
原文地址:https://www.jb51.cc/jquery/178348.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。