好吧,这个给我带来了很多问题。
使用css3时-webkit-transform
具有任何类型 3d 旋转的样式(例如rotateY(30deg)
),给这个旋转的对象绑定点击事件是极其不可靠的。
请参阅下面的示例代码或查看这把小提琴 http://jsfiddle.net/RyvtZ/1/(要查看小提琴中的不可靠性,请单击元素的右侧)。此示例没有动画,但仍然受到影响。
html:
<div id='box1'>Click this box.</div>
css:
#box1{
-webkit-transform: rotateY(30deg);
}
jquery:
$('#box1').click(function(){
alert('clicked box 1');
});
我所说的“不可靠”是指点击事件并不总是被抛出(取决于您在哪里单击它),有时该事件根本不会被抛出(无论您在哪里单击它)。
有没有办法修复或避免这个问题,以便它在旋转和动画时与 CSS3 元素一起工作?
Update:
在元素上使用 CSS 属性“float:left”似乎可以让它正确检测点击事件*不运动时。有谁知道为什么 float 属性可以解决这个问题?
我的最终目标是让对象在运动时接收单击事件,但是,当我应用新的 CSS3rotate3d 属性(实时,在另一个 jquery 事件上)来赋予对象动画时,单击事件再次开始失败。
我似乎无法复制该问题,添加后似乎可以正常工作float: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/ http://jsfiddle.net/RyvtZ/9/
(我添加了console.log
on hover
让生活更简单;))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)