एचटीएमएल तत्वों को संक्रमण के साथ बातचीत नहीं कर सकता

Question

यह बात मुझे पागल कर रही है!

मैं एक HTML पृष्ठ में किसी अन्य div के अंदर प्रोग्रामेटिक रूप से पूरी तरह से स्थित divs बनाते हैं। बाहरी div mousedown और टचस्टार्ट घटनाओं के लिए पंजीकृत है और आंतरिक div css3 संक्रमण का उपयोग कर चलना शुरू होता है।

सभी संक्रमण -वेबकिट-ट्रांसफॉर्म प्रॉपर्टी को प्रभावित करते हैं।

घटना प्रबंधन के अलावा सबकुछ ठीक काम करता है: क्रोम और सफारी में सभी घटनाओं को बाहरी div ईवेंट हैंडलर में पकड़ा जाता है लेकिन घटना की लक्षित संपत्ति शायद ही कभी मैं क्लिक करता हूं !!!

जब कोई div इसके संक्रमण को समाप्त करता है तो ईवेंट लक्ष्य हमेशा सही होता है, लेकिन divs संक्रमण में नहीं होते हैं। क्या यह एक बग है ??? क्या मैं कुछ भूल रहा हूँ?

अद्यतन:

निम्नलिखित नमूना सफारी और क्रोम के साथ संगत है

यहां एक ऑनलाइन नमूना है कि समस्या demostrates है: http://jsfiddle.net/qfn7F/4/

Spheres स्क्रीन के ऊपर से पैदा हो और इसके नीचे की ओर बढ़ रहे हैं। जब उपयोगकर्ता किसी क्षेत्र (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% काम करता है।

Answer 1

मुझे सीएसएस 3 ट्रांसफॉर्म का उपयोग करके एनिमेट करते समय भी इसी तरह की समस्या का सामना करना पड़ा। सीएसएस का उपयोग करने के सीएसएस पदों का उपयोग करें और देना बदलने की Intsead transtion चेतन करने के लिए

jsfiddle.net

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