संक्षिप्त जवाब:
मैंने यह किया। मैंने सभी छोटे लोगों के लिए गतिशील उपयोग के लिए एक समारोह लिखा है ...
कार्य उदाहरण जो पृष्ठ पर प्रदर्शित होता है
कंसोल के लिए लॉगिंग कार्य उदाहरण
लंबा जवाब:
... फिर भी किया।
मुझे ऐसा करने में थोड़ी देर लगी, क्योंकि पृष्ठ पर वास्तव में कोई प्यूसीडो तत्व नहीं है। हालांकि कुछ उत्तर कुछ परिदृश्यों में काम करते हैं, वे सभी गतिशील होने में विफल होते हैं और एक परिदृश्य में काम करते हैं जिसमें एक तत्व दोनों आकार और स्थिति में अप्रत्याशित होता है (जैसे कि मूल तत्व के एक हिस्से को ओवरले करने वाले निरपेक्ष तैनात तत्व)। मेरा नहीं है।
उपयोग:
//some element selector and a click event...plain js works here too
$("div").click(function() {
//returns an object {before: true/false, after: true/false}
psuedoClick(this);
//returns true/false
psuedoClick(this).before;
//returns true/false
psuedoClick(this).after;
});
यह काम किस प्रकार करता है:
यह मूल तत्व की ऊँचाई, चौड़ाई, शीर्ष और बाईं स्थिति (खिड़की के किनारे से दूर स्थिति के आधार पर) पकड़ लेता है और ऊँचाई, चौड़ाई, शीर्ष और बाएँ पदों को पकड़ लेता है (मूल कंटेनर के किनारे पर आधारित है) ) और यह निर्धारित करने के लिए उन मूल्यों की तुलना करता है कि स्क्रीन पर psuedo तत्व कहां है।
यह तब तुलना करता है कि माउस कहाँ है। जब तक माउस नव निर्मित वैरिएबल रेंज में होता है तब तक यह सही रहता है।
ध्यान दें:
माता-पिता के तत्व को विश्वसनीय बनाना बुद्धिमानी है। यदि आपके पास एक पूर्ण स्थान पर स्थित प्यूटो तत्व है, तो यह फ़ंक्शन केवल तभी काम करेगा जब यह माता-पिता के आयामों पर आधारित हो (इसलिए माता-पिता को रिश्तेदार होना चाहिए ... शायद चिपचिपा या स्थिर काम करेगा .... मुझे नहीं पता)।
कोड:
function psuedoClick(parentElem) {
var beforeClicked,
afterClicked;
var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10),
parentTop = parseInt(parentElem.getBoundingClientRect().top, 10);
var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10),
parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10);
var before = window.getComputedStyle(parentElem, ':before');
var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)),
beforeEnd = beforeStart + parseInt(before.width, 10);
var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)),
beforeYEnd = beforeYStart + parseInt(before.height, 10);
var after = window.getComputedStyle(parentElem, ':after');
var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)),
afterEnd = afterStart + parseInt(after.width, 10);
var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)),
afterYEnd = afterYStart + parseInt(after.height, 10);
var mouseX = event.clientX,
mouseY = event.clientY;
beforeClicked = (mouseX >= beforeStart && mouseX <= beforeEnd && mouseY >= beforeYStart && mouseY <= beforeYEnd ? true : false);
afterClicked = (mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd ? true : false);
return {
"before" : beforeClicked,
"after" : afterClicked
};
}
सहयोग:
मुझे नहीं पता .... ऐसा लगता है जैसे कि गूंगा है और कभी-कभी एक गणना मूल्य के रूप में ऑटो वापस करना पसंद करता है। अगर सभी CSS में सेट हैं तो सभी ब्रम्हांड में काम करना है। इसलिए ... अपने प्यूसीडो तत्वों पर अपनी ऊंचाई और चौड़ाई निर्धारित करें और केवल उन्हें शीर्ष और बाएं से स्थानांतरित करें। मैं उन चीजों पर इसका उपयोग करने की सलाह देता हूं जो आप ठीक हैं इसके साथ काम नहीं करना। जैसे कोई एनीमेशन या कुछ और। क्रोम काम करता है ... हमेशा की तरह।