無法與轉換HTML元素互動

這件事讓我生氣！無法與轉換HTML元素互動

我創建了編程絕對定位的div在html頁面中的另一個div內。外部div註冊了mousedown和touchstart事件，內部div使用css3轉換開始移動。

所有轉換都會影響-WebKit-transform屬性。

一切正常，除了事件處理：在Chrome和Safari中，所有的事件都被捕獲到外部div事件處理程序中，但事件的目標屬性很少是我點擊的div！

當div完成它的轉換時，事件目標始終是正確的，但不是在div轉換時。這是一個錯誤？我錯過了什麼嗎？

UPDATE：

下面的示例是與Safari和Chrome兼容

這是一個在線樣本是演示功能的問題：http://jsfiddle.net/qfn7F/4/

球得到從屏幕頂部催生和正在走向它的底部。當用戶點擊一個球體（mousedown事件）時，被點擊的球體必須從屏幕上消失。

這裏是處理與球體的互動代碼：

container.addEventListener(onSelect, function() { 
    if (event.target.classList.contains("transition")) { 
     var tDiv = event.target; 
     var box = tDiv.getBoundingClientRect(); 
     var durationEase = "0.25s linear"; 
     tDiv.style.pointerEvents = "none"; 
     tDiv.style.webkitTransform = "translate3d(" + box.left + "px," + box.top + "px, 1px)"; 
     tDiv.style.opacity = 0; 
     tDiv.style.webkitTransition = "opacity " + durationEase; 
    } 
    event.preventDefault(); 
    event.stopPropagation(); 
}, false);

但該事件的目標是很少的用戶點擊，球不會以一致的方式從屏幕上消失的領域。

如果一個球體到達屏幕的底部，那就是過渡結束，那麼點擊事件就會100％工作。

來源

2013-10-28 Summon

您可以顯示的jsfiddle一個例子嗎？ –

@AdamMoszczyński這裏是小提琴http://jsfiddle.net/qfn7F/4/ – Summon

相關問題： http://stackoverflow.com/questions/18629298/on-a-moving-element-dont-fire-the-鼠標事件 http://stackoverflow.com/questions/9304215/css3-translate3d-mouse-events-issue http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit- transform-translate3d http://stackoverflow.com/questions/18496551/translate3d-causing-jquery-hover-click-events-to-not-fire-correctly –

我在使用css3 Transform進行動畫製作時遇到了類似的問題。使用CSS變換使用CSS位置，並給出Intsead躍遷動畫

jsfiddle.net

tDiv.style.top = (tDiv.offsetWidth * 0.5 + Math.random() * (window.innerWidth - tDiv.offsetWidth)) + "px"; 
tDiv.style.right = (window.innerHeight - tDiv.offsetHeight) + "px";

來源

2013-11-18 07:46:11

這不像變形動畫一樣表演，因爲在這種情況下元素不被緩存... – Summon

我無法理解緩存部分。你能解釋一下嗎？ –

如果您使用transform屬性而不是top，left等來設置元素的動畫效果，那麼由於GPU加速，性能會更高。如果您將translate3d（0,0,0）應用於該元素，然後爲左上角的屬性設置動畫，則甚至可以這樣做。更多細節在這裏：http://stackoverflow.com/questions/9661876/css-is-transition-left-top-gpu-accelerated – Summon

無法與轉換HTML元素互動

回答

相關問題