मैं शुद्ध जावास्क्रिप्ट में एक माउसओवर का अनुकरण कैसे करूं जो CSS ": hover" को सक्रिय करता है?

Question

मैं mouseoverक्रोम में अनुकरण करने के लिए कोड खोजने की कोशिश कर रहा हूं, लेकिन भले ही "माउसओवर" श्रोता निकाल दिया जाता है, सीएसएस "हॉवर" घोषणा कभी सेट नहीं होती है!

मैंने भी करने की कोशिश की:

//Called within mouseover listener
theElement.classList.add("hover");

लेकिन इसके hoverघोषणा में घोषित किए गए तत्व को बदलने के लिए कुछ भी नहीं लगता है ।

क्या यह संभव है?

Comments

@ पीएसएल मुझे लगता है कि वह जो करना चाहता है वह :hoverएक तत्व पर राज्य करना है ।

— बेंजामिन ग्रुएनबाम

@BenjaminGruenbaum यूप आप सही हैं। मैंने गलत समझा।

— PSL

यह कोई नकल नहीं है। दूसरा सवाल jQuery के बारे में है। यह सवाल शुद्ध जेएस के बारे में है।

— चक ले बट

@ मोंक OQ में jQuery टैग शामिल था। यह एक डुप्लिकेट है।

— जेसनमोर्चर

@JasonMArcher प्रश्न (और इसका उत्तर) शुद्ध JS के बारे में है। क्या आपको नहीं लगता कि यह अधिक संभावना है कि उन्होंने इसे गलत माना है।

— चक ले बट

Answer 1

आप नहीं कर सकते। यह एक विश्वसनीय घटना नहीं है ।

उपयोगकर्ता एजेंट द्वारा उत्पन्न होने वाली घटनाएँ, या तो उपयोगकर्ता इंटरैक्शन के परिणामस्वरूप, या DOM में परिवर्तनों के प्रत्यक्ष परिणाम के रूप में, उपयोगकर्ता एजेंट द्वारा उन विशेषाधिकारों के साथ भरोसा किया जाता है, जो DocumentEvent.createEvent के माध्यम से स्क्रिप्ट द्वारा उत्पन्न घटनाओं के लिए वहन नहीं किए जाते हैं। ("इवेंट") विधि, Event.initEvent () पद्धति का उपयोग करके संशोधित, या EventTarget.dispatchEvent () विधि के माध्यम से भेजा गया। विश्वसनीय घटनाओं की अनुमानित विशेषता सच का एक मूल्य है, जबकि अविश्वसनीय घटनाओं में गलत का एक विशेषता विशेषता मूल्य है।

अधिकांश अविश्वसनीय घटनाओं को क्लिक या DOMActivate घटनाओं के अपवाद के साथ डिफ़ॉल्ट क्रियाओं को ट्रिगर नहीं करना चाहिए ।

आपको एक वर्ग जोड़ना होगा और माउसओवर / माउसआउट घटनाओं पर मैन्युअल रूप से जोड़ना / हटाना होगा।

Comments

@ टिम, यह वास्तव में क्यों जवाब नहीं है । यह सिर्फ सवाल बदलता है ।

— पेसरियर

@ स्पेसर यह एक विश्वसनीय घटना नहीं है क्योंकि यह उपयोगकर्ता द्वारा शुरू नहीं किया गया था। यह मेरे जवाब में ऊपर बोली में वहीं कहती है । यह वस्तुतः क्या उत्तर के साथ शुरू होता है।

— बेंजामिन Gruenbaum

@BenjaminGruenbaum, मैं "क्लिक या DOMActivate घटनाओं के अपवाद के साथ" उद्धृत कर रहा हूं । "हॉवर" के बारे में ऐसा क्या खास है जो इस अपवाद सूची में नहीं है? हमें "फ़ोकस" कहने की अनुमति क्यों है लेकिन "हॉवर" नहीं? ये ऐसे सवाल हैं जिनका हमें जवाब देना है, किसी भी चीज़ का जवाब देना बस सवाल को बदलना है ।

— पचेरियर

मैं मान सकता हूं कि हॉवर (और ड्रैग एंड ड्रॉप के लिए क्लिक या माउस अप और डाउन के साथ संयुक्त है), किसी उपयोगकर्ता के सिस्टम को हाइजैक करने जैसा व्यवहार कर सकता है या प्रकट कर सकता है (यदि आप स्वचालन के मामलों की उपेक्षा करते हैं), तो यह समर्थन करने के लिए आदर्श नहीं है। क्लिक मैं नहीं कह सकता, लेकिन फ़ोकस को फ़ोकस फ़ॉर्म फ़ील्ड पर ऑटो-फ़ोकस करने की अनुमति देगा या साइट डिज़ाइनर चाहता है कि उपयोगकर्ता उदाहरण के लिए मिस या गलत डेटा वाले टेक्स्ट फ़ील्ड को उदाहरण के लिए कहने पर ध्यान केंद्रित करे (उदाहरण के लिए फ़ील्ड सत्यापन जाँच)। लेकिन यह सिर्फ मेरी धारणा है।

— डेविड

हां, जितना बेतुका लगता है कि आप यह प्रकट कर सकते हैं कि फोकस एक उपयोगकर्ता इंटरैक्शन के कारण हुआ था जहां यह नहीं था। व्यवहार में - ब्राउज़र एपीआई खुशी से कल्पना की अवज्ञा करेगा और ध्यान को अनदेखा करेगा और अविश्वसनीय घटनाओं (कम से कम क्रोम) के रूप में क्लिक करेगा। उदाहरण के लिए क्रोम एक्सटेंशन के लिए एक्सटेंशन इंस्टॉल बटन पर एक क्लिक पर अनुकरण करने का प्रयास करें और देखें कि क्या होता है :)

— बेंजामिन ग्रुएनबाउम

Answer 2

आप इस तरह के माउसओवर इवेंट का अनुकरण कर सकते हैं:

एचटीएमएल

<div id="name">My Name</div>

जावास्क्रिप्ट

var element = document.getElementById('name');
element.addEventListener('mouseover', function() {
  console.log('Event triggered');
});

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

element.dispatchEvent(event);

Comments

धन्यवाद, मुझे बस जरूरत थी बुलबुले की! डेवलपर कंसोल इंस्पेक्टर में एक तत्व को राइट-क्लिक करें और "कंसोल में उपयोग करें" (फ़ायरफ़ॉक्स) या "स्टोर को वैश्विक चर के रूप में" (क्रोम) करें। तब आप कर सकते हैं, जैसे temp0.dispatchEvent(new MouseEvent('mouseover', {bubbles: true})) कि टूलटिप्स या अन्य सामग्री के लिए बहुत उपयोगी है जो केवल माउस-ओवर पर दिखाई देता है।

— डेनिस होवे

यह शानदार है।

— विद्रोही जूल

@DenisHowe उस उपयोग-केस के लिए, आपको :hovdevtools में शैली निरीक्षक के शीर्ष पर स्थित बटन को देखना चाहिए । यह आपको निरीक्षण किए जा रहे तत्व पर अपनी पसंद के किसी भी छद्मकोश को सक्रिय करने देता है।

— hallo

Answer 3

पृष्ठभूमि

मैं स्वचालित परीक्षणों को लिखने की कोशिश करते हुए इस सवाल पर ठोकर खाई, यह सत्यापित करने के लिए कि किसी दिए गए पृष्ठ पर तत्वों के एक निश्चित सेट में एचओएस घटनाओं के लिए सीएसएस द्वारा निर्धारित सीएसएस गुणों के कुछ सेट हैं।

जबकि उपरोक्त उत्तर पूरी तरह से बताता है, कि जेएस द्वारा केवल हॉवर इवेंट को ट्रिगर करना क्यों संभव नहीं है और फिर ब्याज के कुछ सीएसएस मूल्य की जांच करें, यह प्रारंभिक प्रश्न का उत्तर देता है "मैं शुद्ध जावास्क्रिप्ट में माउसओवर का अनुकरण कैसे करता हूं जो CSS को सक्रिय करता है" : मंडराना "?" केवल आंशिक रूप से।

अस्वीकरण

यह एक प्रदर्शन योग्य समाधान नहीं है। हम इसका उपयोग केवल स्वचालित परीक्षण के लिए करते हैं, जहां प्रदर्शन चिंता का विषय नहीं है।

उपाय

simulateCssEvent = function(type){
    var id = 'simulatedStyle';

    var generateEvent = function(selector){
        var style = "";
        for (var i in document.styleSheets) {
            var rules = document.styleSheets[i].cssRules;
            for (var r in rules) {
                if(rules[r].cssText && rules[r].selectorText){
                    if(rules[r].selectorText.indexOf(selector) > -1){
                        var regex = new RegExp(selector,"g")
                        var text = rules[r].cssText.replace(regex,"");
                        style += text+"\n";
                    }
                }
            }
        }
        $("head").append("<style id="+id+">"+style+"</style>");
    };

    var stopEvent = function(){
        $("#"+id).remove();
    };

    switch(type) {
        case "hover":
            return generateEvent(":hover");
        case "stop":
            return stopEvent();
    }
}

व्याख्या

GenerEvent सभी css फाइल्स को पढ़ता है, रिप्लेस करता है: एक खाली स्ट्रिंग के साथ होवर करें और इसे लागू करें। इसका प्रभाव है, कि सभी: हॉवर शैलियों को लागू किया जाता है। अब एक howered शैली के लिए जांच कर सकते हैं और सिमुलेशन को रोककर प्रारंभिक अवस्था में वापस आ सकते हैं।

हम पूरे दस्तावेज़ के लिए होवर प्रभाव क्यों लागू करते हैं और केवल शीट से प्राप्त करके ब्याज के तत्व के लिए नहीं, और फिर एक तत्व प्रदर्शन करते हैं। (...)?

उस के रूप में किया, शैली इनलाइन लागू किया जाएगा, यह अन्य शैलियों को ओवरराइड करेगा, जो मूल सीएसएस होवर-शैली द्वारा ओवरराइड नहीं किया जा सकता है।

अब मैं किसी एक तत्व के लिए होवर का अनुकरण कैसे करूंगा?

यह बेहतर नहीं है। यदि आपको आवश्यक है, तो आप एलिमेंट के साथ जांच कर सकते हैं। (selectorOfInterest) यदि शैली आपके तत्व के लिए लागू होती है और केवल आपकी शैलियों का उपयोग करती है।

उदाहरण

जैस्मीन में आप अब प्रदर्शन कर सकते हैं:

describe("Simulate CSS Event", function() {
    it("Simulate Link Hover", function () {
      expect($("a").css("text-decoration")).toBe("none");
      simulateCssEvent('hover');
      expect($("a").css("text-decoration")).toBe("underline");
      simulateCssEvent('stop');
      expect($("a").css("text-decoration")).toBe("none");
    });
});

Comments

यह जवाब बहुत अच्छा है! दुर्भाग्यवश, क्रोम पर क्रॉस-ऑरिजिनल अनुरोधों तक पहुंच सीमित करने के कारण यह अन्य होस्ट्स के स्टाइलशीट वाले पृष्ठों पर क्रोम के हालिया संस्करणों पर विफल रहता है। इस समाधान का समर्थन करने के लिए मेरा जवाब देखें :)

— FThompson

Answer 4

मैं इस मामले में आमतौर पर जावास्क्रिप्ट का उपयोग कर एक वर्ग जोड़ रहा हूँ .. और के CSSरूप में ही संलग्न:hover इस वर्ग के लिए

प्रयोग करके देखें

theElement.addEventListener('onmouseover', 
    function(){ theElement.className += ' hovered' });

या पुराने ब्राउज़र के लिए:

theElement.onmouseover = function(){theElement.className += ' hovered'};

onmouseoutजब आप तत्व छोड़ते हैं तो आपको "हॉवरेड" क्लास को हटाने के लिए टोकेरो का उपयोग करना होगा ...

Comments

यह वह नहीं करेगा जो ओपी पूछता है, हालांकि यह सही लाइनों के साथ संभवतः अधिक-या-कम है। आधुनिक इवेंट हैंडलर अटैचमेंट तकनीकों का उपयोग करना बेहतर होगा।

— नुकीले

क्षमा करें, गलत समझा सवाल

— Yotam Omer

@ शुद्ध जावास्क्रिप्ट के लिए प्रश्न पूछने पर .. घटनाओं को अन्यथा कैसे जोड़ा जा सकता है?

— योतम ओमर

बहुत अच्छा नहीं? यह "शुद्ध" जावास्क्रिप्ट है, और यह वास्तव में एक समारोह को एक घटना के लिए एक हैंडलर के रूप में संलग्न करेगा। इंटरनेट एक्सप्लोरर में, (लगभग) समकक्ष attachEvent()का उपयोग किया जाएगा।

— पॉइन्टी

उल्लेख के लायक। IE9 और 10 समर्थन addEventListenerऔर यह घटनाओं को संलग्न करने का सबसे अच्छा तरीका है, चमक attachEventको केवल IE8 (और नीचे) में आवश्यक है। योताम, यदि वह onmouseoverसीधे विशेषता को सेट करके (फिर इवेंट श्रोता को जोड़कर) एक और हैंडलर जोड़ता है, तो यह वर्तमान में सेट की गई घटना को ओवरराइड कर देगा। इस सवाल को अंतर पर देखें ।

— बेंजामिन ग्रुएनबाम

Answer 5

आप छद्म का उपयोग कर सकते हैं : स्टाइलर , एक पुस्तकालय जो तत्वों के लिए सीएसएस छद्म कक्षाएं लागू कर सकता है।

(async () => {
  let styler = new PseudoStyler();
  await styler.loadDocumentStyles();
  document.getElementById('button').addEventListener('click', () => {
    const element = document.getElementById('test')
    styler.toggleStyle(element, ':hover');
  })
})();

डिस्क्लेमर: मैं इस लाइब्रेरी का एक कोठोर हूं। हमने इसे अतिरिक्त रूप से क्रॉस-मूल स्टाइलशीट का समर्थन करने के लिए डिज़ाइन किया है, विशेष रूप से क्रोम एक्सटेंशन में उपयोग के लिए जहां आपको पृष्ठ के सीएसएस नियमों पर नियंत्रण की कमी है।

Comments

यह वास्तव में काफी अच्छा काम करता है, तब भी जब window.getComputedStyle(<youElement>)छद्म शैली को स्थापित करने के बाद संयुक्त किया जाता है। धन्यवाद!

— डैनियल वेहेलमैन

Answer 6

मैं मान रहा हूँ कि आप डोम हेरफेर के बाद CSS का निरीक्षण करना चाहते हैं, लेकिन जैसे ही आप अपने माउस को वापस devtools पर ले जाते हैं, यह घटना उस html तत्व पर सक्रिय नहीं होती है। आप शायद अपने जावास्क्रिप्ट घटनाओं के लिए devtools में: हॉवर विकल्प की तरह कुछ करना चाहते हैं। यह मौजूद नहीं है, लेकिन आप इसे अनुकरण कर सकते हैं।

1. अपने devtools खोलें और इसे सक्रिय करने के लिए इसमें क्लिक करें।
2. उस तत्व पर ईवेंट ट्रिगर करें जिसमें आप रुचि रखते हैं।
3. माउस को हिलाए बिना, ctrl + shift + p के साथ devtools कमांड पैनल खोलें और अपने कीबोर्ड से 'अक्षम जावास्क्रिप्ट' चुनें।

चूंकि जावास्क्रिप्ट अक्षम है, इसलिए उसे तत्व को फिर से संशोधित करने का मौका नहीं मिलता है। आप devtools पर जा सकते हैं और css और html का निरीक्षण कर सकते हैं जैसे कि आप इसके साथ कुछ और कर रहे थे, क्लिक कर रहे थे या कर रहे थे। आपके द्वारा किए जाने के बाद, कमांड पैनल पर फिर से जाएं और 'जावास्क्रिप्ट सक्षम करें' चुनें।

Comments

नीट तकनीक, लेकिन जब तक मैं आपके इरादे को गलत नहीं मानता , यह पहले से ही भक्तों में मौजूद है! क्रोम / क्रोमियम और फ़ायरफ़ॉक्स के डिवॉल्ट्स दोनों :hovमें, शैली निरीक्षक के शीर्ष पर एक बटन होता है ("फ़िल्टर" इनपुट बॉक्स के बगल में)। क्लिक करने से :hovफैलता है चेक बॉक्स की एक श्रृंखला है, प्रत्येक एक pseudoclass के साथ लेबल: :active, :focus, :focus-within, :hover, और :visited। और इनमें से किसी भी एक बक्से की जाँच करने से निरीक्षण होने वाले तत्व पर उसके संबंधित छद्मकोश सक्रिय हो जाते हैं।

— hallo