क्या jQuery .on और होवर का उपयोग करना संभव है?

Question

मेरे पास एक <ul>प्रारंभिक पृष्ठ लोड होने के बाद जावास्क्रिप्ट के साथ आबादी है। मैं वर्तमान .bindमें mouseoverऔर के साथ प्रयोग कर रहा हूँ mouseout।

परियोजना सिर्फ jQuery 1.7 के लिए अद्यतन की गई है, इसलिए मेरे पास उपयोग करने का विकल्प है .on, लेकिन मैं इसे काम करने के लिए प्राप्त नहीं कर सकता hover। क्या इसके .onसाथ उपयोग करना संभव है hover?

संपादित करें : मैं जिन तत्वों से जुड़ रहा हूं, वे दस्तावेज़ लोड होने के बाद जावास्क्रिप्ट के साथ लोड किए गए हैं। इसलिए मैं उपयोग कर रहा हूं onऔर सिर्फ नहीं hover।

Comments

नीचे एक टिप्पणी से - ऑन () में होवर ईवेंट समर्थन को jQuery 1.8 में हटा दिया गया था, और jQuery 1.9 में हटा दिया गया था । के संयोजन के साथ प्रयास करें mouseenterऔर mouseleaveके रूप में calebthebrewer ने सुझाव दिया,।

— 18

Answer 1

( जावास्क्रिप्ट के साथ आबादी वाले तत्वों का उपयोग करने की आवश्यकता होने पर इस उत्तर में अंतिम संपादन देखें.on() )

इसका उपयोग उन तत्वों के लिए करें, जो जावास्क्रिप्ट का उपयोग कर आबाद नहीं हैं:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()इसका अपना हैंडलर है: http://api.jquery.com/hover/

यदि आप कई कार्य करना चाहते हैं, तो उन्हें .on()हैंडलर में श्रृंखलाबद्ध करें, जैसे:

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

प्रदान की नीचे आप उपयोग कर सकते हैं जवाब के अनुसार hoverके साथ .on()है, लेकिन:

यद्यपि नए कोड के लिए दृढ़ता से हतोत्साहित किया जाता है, आप स्ट्रिंग "माउसेंटर मूसलीव" के लिए शॉर्टहैंड के रूप में उपयोग किए जाने वाले छद्म-घटना-नाम "होवर" को देख सकते हैं। यह उन दो घटनाओं के लिए एक एकल ईवेंट हैंडलर संलग्न करता है, और हैंडलर ने ईवेंट की जांच करनी चाहिए। यह निर्धारित करने के लिए कि ईवेंट माउसटरेन या मूसलीव है। "होवर" छद्म घटना-नाम को .hover () विधि के साथ भ्रमित न करें, जो एक या दो कार्यों को स्वीकार करता है।

इसके अलावा, इसका उपयोग करने के लिए कोई प्रदर्शन लाभ नहीं हैं और यह केवल उपयोग करने से अधिक तेज़ है mouseenterया mouseleave। मैंने जो उत्तर दिया है, उसके लिए कम कोड की आवश्यकता है और इस तरह से कुछ हासिल करने का उचित तरीका है।

संपादित करें

इस प्रश्न का उत्तर दिए कुछ समय हो गया है और ऐसा प्रतीत होता है कि इसने कुछ कर्षण प्राप्त कर लिया है। उपरोक्त कोड अभी भी खड़ा है, लेकिन मैं अपने मूल उत्तर में कुछ जोड़ना चाहता था।

जबकि मैं इसका उपयोग करना पसंद करता हूं mouseenterऔर mouseleave(मुझे कोड में क्या चल रहा है यह समझने में मदद करता है) इसके साथ .on()निम्नलिखित लिखने जैसा ही हैhover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

के बाद से मूल प्रश्न पूछते हैं कि वे ठीक तरह से इस्तेमाल कर सकते हैं किया था on()के साथ hover(), मैंने सोचा कि मैं के उपयोग को सही हैं on()और यह आवश्यक जोड़ने के लिए नहीं मिला hover()समय में कोड।

EDIT DECEMBER 11, 2012

नीचे दिए गए कुछ नए उत्तर विस्तार से बताएंगे कि कैसे .on()काम करना चाहिए यदि divप्रश्न जावास्क्रिप्ट का उपयोग करके पॉपुलेटेड है। उदाहरण के लिए, मान लें कि आप divjQuery के .load()ईवेंट का उपयोग करते हैं , जैसे:

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

इसके लिए उपरोक्त कोड .on()नहीं होगा। इसके बजाय, आपको अपना कोड इस तरह बदलना चाहिए:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

यह कोड किसी .load()घटना के होने के बाद जावास्क्रिप्ट के साथ आबादी वाले तत्व के लिए काम करेगा । बस अपने तर्क को उचित चयनकर्ता में बदल दें।

Comments

@ ध्यान दें, कृपया ध्यान दें कि JonMcIntosh का उत्तर मेरे प्रश्न का उत्तर नहीं देता है क्योंकि वह केवल हॉवर कार्यक्षमता का आधा उपयोग कर रहा है।

— रियरे

यह उन तत्वों के लिए काम नहीं करता है जिन्हें DOM में जोड़ा गया है। @Nik Chankov नीचे बताते हैं, यहां .on के सही उपयोग () संलग्न कई संचालकों के लिए है stackoverflow.com/questions/8608145/...

— soupy1976

@ soupy1976 ने मेरे उत्तर को संपादित किया, यह अब जावास्क्रिप्ट के साथ आबादी वाले तत्वों को ध्यान में रखता है।

— सेथेंन

@SethenMaleno - वास्तव में, और आपका .on()समाधान या तो छद्म मंडराने वाली घटना को हटाने और वास्तविक लोगों का उपयोग करने के साथ काम करता है। मुझे आपके लिए पहला मूषक / मूसलीवेट +1 वाला सचित्र पसंद है

— मार्क शुल्त्स

उस एडिट ने मेरे वोट को डाउन-वोट से अप-वोट में बदल दिया, अच्छी तरह से खेला, सेथेन, अच्छी तरह से खेला गया!

— सीन केंडल

Answer 2

प्रश्न के अनुरोध के रूप में दस्तावेज़ के बाद लोड किए गए ऑब्जेक्ट से अधिक / बाहर मूसिंग करते समय इनमें से किसी ने भी मेरे लिए काम नहीं किया। मुझे पता है कि यह प्रश्न पुराना है, लेकिन मेरे पास अभी भी देख रहे लोगों के लिए एक समाधान है:

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

यह फ़ंक्शंस को चयनकर्ता को बाध्य करेगा ताकि दस्तावेज़ तैयार होने के बाद इस चयनकर्ता के साथ ऑब्जेक्ट्स अभी भी इसे कॉल करने में सक्षम होंगे।

Comments

इस एक के पास उचित समाधान है: stackoverflow.com/questions/8608145/…

— निक चानकोव

यह है कि मुझे यह कैसे काम कर रहा है, मैंने पाया उत्तर को चयनकर्ता को डालने से पहले मिला। एक .लोड () घटना के बाद काम नहीं किया लेकिन यह करता है।

— मैट

@calebthebrewer ने मेरे उत्तर को संपादित किया, यह अब जावास्क्रिप्ट के साथ आबादी वाले तत्वों को ध्यान में रखता है।

— सेथेंन

यहां उपयोग करने mouseoverऔर mouseoutघटनाओं के कारण कोड को लगातार आग लग जाएगी क्योंकि उपयोगकर्ता तत्व के अंदर माउस को घुमाता है। मुझे लगता है कि mouseenterऔर mouseleaveअधिक उपयुक्त हैं क्योंकि यह केवल एक बार प्रवेश करने पर आग लगाएगा।

— जोहन्तेरुर

मूल तत्व के रूप में दस्तावेज़ का उपयोग करना सबसे अच्छा अभ्यास नहीं है, क्योंकि इसका प्रदर्शन भूखा है। आप दस्तावेज़ की निगरानी कर रहे हैं, जबकि लोड के साथ () आप ज्यादातर समय वेबसाइट (f.ex. #content) के एक हिस्से का ही हेरफेर करते हैं। तो यह बेहतर है कि इसे तत्व तक सीमित करने की कोशिश की जाए,

— यानी

Answer 3

मुझे यकीन नहीं है कि आपका बाकी जावास्क्रिप्ट कैसा दिखता है, इसलिए यदि कोई व्यवधान है तो मैं नहीं बता पाऊंगा। लेकिन के .hover()साथ एक घटना के रूप में ठीक काम करता है .on()।

$("#foo").on("hover", function() {
  // disco
});

यदि आप इसकी घटनाओं का उपयोग करने में सक्षम होना चाहते हैं, तो घटना से लौटी हुई वस्तु का उपयोग करें:

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

Comments

होवर उपयोग करता है / बंद के लिए यह अलग-अलग फ़ंक्शन को कैसे संभालता है? Ex: $('#id').hover(function(){ //on }, function(){ //off});

— Ryre

मेरे लिए, यह आवश्यक नहीं है .. आप उपयोग की जरूरत नहीं है .on()के साथ hoverजब आप बस के रूप में आसानी से से छुटकारा पा सकते .on()हैं और साथ बदलें .hover()समारोह और एक ही परिणाम मिलता है। कम कोड लिखने के बारे में jQuery नहीं है ??

— सेथेन

@Toast यह नहीं है, यह देखने के लिए नीचे दिए गए मेरा उत्तर प्रदर्शन करने के लिए कैसे को देखने के लिए mouseenterऔर mouseleaveसाथ काम करता है.on()

— Sethen

मैंने अपने जवाब को अपडेट कर दिया है ताकि दोनों प्रकार के आयोजन शामिल हो सकें। यह सेथेन के जवाब के समान ही काम करता है लेकिन इसका स्वाद अलग है।

— जॉन मैकिन्टोश

hoverइवेंट समर्थन On()jQuery 1.8 में हटा दिया गया था, और jQuery 1.9 में हटा दिया गया था।

— कोडिंग किया गया

Answer 4

jQuery हॉवर फ़ंक्शन माउसओवर और माउसआउट कार्यक्षमता देता है।

$ (चयनकर्ता) .hover (inFunction, outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

स्रोत: http://www.w3schools.com/jquery/event_hover.asp

Comments

निश्चित रूप से काम करता है। आपको एक डाउन वोट मिला क्योंकि कुछ लोग डंप हैं! धन्यवाद मेट

— करीम

Answer 5

बस वेब से सामने आया और मुझे लगा कि मैं इसमें योगदान दे सकता हूं। मैंने देखा कि @calethebrewer द्वारा पोस्ट किए गए उपरोक्त कोड से चयनकर्ता पर कई कॉल हो सकते हैं और उदाहरण के लिए अप्रत्याशित व्यवहार: -

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

यह बेला http://jsfiddle.net/TWskH/12/ मेरी बात को सचित्र करती है। जब प्लगइन्स जैसे तत्वों को एनिमेट करते हुए मैंने पाया है कि इन कई ट्रिगर्स के परिणामस्वरूप अनपेक्षित व्यवहार होता है जिसके परिणामस्वरूप एनीमेशन या कोड को आवश्यकता से अधिक कॉल किया जा सकता है।

मेरा सुझाव है कि बस माउसटर / मूसलीव के साथ बदलें: -

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

हालाँकि इसने मेरे एनीमेशन के कई उदाहरणों को बुलाया जाने से रोक दिया, मैं अंततः माउसओवर / मूसलीव के साथ चला गया क्योंकि मुझे यह निर्धारित करने की आवश्यकता थी कि माता-पिता के बच्चों को कब हॉवर किया जा रहा है।

Comments

यह उत्तर वास्तव में दस्तावेज़ चयनकर्ता के लिए एक हॉवर ईवेंट जोड़ने के लिए एक कार्यशील समाधान प्रदान करता है। +1

— रिच डेविस

Answer 6

आप उपयोग कर सकते हैं .on()के साथ hoverकर रही है कि क्या अतिरिक्त नोट्स अनुभाग का कहना है द्वारा:

यद्यपि नए कोड के लिए दृढ़ता से हतोत्साहित किया जाता है, आप स्ट्रिंग "माउसेंटर मूसलीव" के लिए शॉर्टहैंड के रूप में उपयोग किए जाने वाले छद्म-घटना-नाम "होवर" को देख सकते हैं। यह उन दो घटनाओं के लिए एक एकल ईवेंट हैंडलर संलग्न करता है, और हैंडलर ने ईवेंट की जांच करनी चाहिए। यह निर्धारित करने के लिए कि ईवेंट माउसटरेन या मूसलीव है। "होवर" छद्म घटना-नाम को .hover () विधि के साथ भ्रमित न करें, जो एक या दो कार्यों को स्वीकार करता है।

यह निम्नलिखित करने के लिए होगा:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

---

EDIT (jQuery 1.8+ उपयोगकर्ताओं के लिए नोट):

JQuery 1.8 में पदावनत, 1.9 में हटाया गया: "होवर" नाम का उपयोग स्ट्रिंग "माउसेंटर मूसलीव" के लिए शॉर्टहैंड के रूप में किया जाता है। यह उन दो घटनाओं के लिए एक एकल ईवेंट हैंडलर संलग्न करता है, और हैंडलर ने ईवेंट की जांच करनी चाहिए। यह निर्धारित करने के लिए कि ईवेंट माउसटरेन या मूसलीव है। "होवर" छद्म घटना-नाम को .hover () विधि के साथ भ्रमित न करें, जो एक या दो कार्यों को स्वीकार करता है।

Comments

यह केवल और अधिक काम है जब इसे आसानी से उपयोग किया जा सकता है mouseenterऔर mouseleave... मुझे पता है, यह ओपी के मूल प्रश्न का उत्तर नहीं देता है, लेकिन फिर भी, hoverइस तरह से उपयोग करना बुद्धिमान नहीं है।

— सेथेन

इस तरह से करना ठीक उसी तरह है जैसे कि jQuery की टीम आपको सुझाव देती है कि आप इसे ओपी के प्रश्न के अनुसार करें। हालाँकि, जैसा कि jQuery टीम का सुझाव है, यह नए कोड के लिए दृढ़ता से हतोत्साहित है। लेकिन, यह अभी भी ओपी के सवाल का सही जवाब है।

— कोड मेवरिक

@ सच - तुम मुझसे ज्यादा तेज थे :-)। @ सेथेन - दोनों तरीके काम करेंगे, लेकिन पूछने वाले ने कार्यक्षमता के साथ अनुरोध किया .hover()।

— जॉन मैकिन्टोश

इतनी समझ से, लेकिन फिर भी, मुझे लगता है कि ओपी इसके लिए एक समाधान की तलाश कर रहा था mouseenterऔर mouseleaveकेवल इसके साथ काम करने के बजाय hover। यदि hoverप्रदर्शन कारणों के लिए उपयोग करने का कोई वास्तविक कारण नहीं है, तो नए कोड के लिए दृढ़ता से हतोत्साहित होने पर इसका उपयोग क्यों करें?

— सेथेन

hoverइवेंट समर्थन On()jQuery 1.8 में हटा दिया गया था, और jQuery 1.9 में हटा दिया गया था।

— कोडिंग किया

Answer 7

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

Answer 8

आप एक या एक से अधिक घटना प्रकारों को एक स्थान से अलग प्रदान कर सकते हैं।

तो hoverबराबर होता हैmouseenter mouseleave ।

यह मेरी शक्कर है:

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Comments

मुझे इस पैरामीटर को कम करने के लिए jQ का निर्णय पसंद है। पूर्व संस्करण 1.8, नाम स्थान के रूप में होवर का उपयोग करते हुए DOM ईवेंट, होवर, कोई संबंध नहीं था।

— 14:22 पर जिम 22150

Answer 9

यदि आपको किसी अन्य घटना में एक शर्त के रूप में इसकी आवश्यकता है, तो मैंने इसे इस तरह से हल किया:

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

फिर किसी अन्य घटना में, आप इसे आसानी से उपयोग कर सकते हैं:

 if ($(this).data('hover')){
      //...
 }

(मैं is(':hover')इसे हल करने के लिए कुछ का उपयोग करता हूं । लेकिन यह एक वैध jQuery चयनकर्ता नहीं है (अभी तक) और सभी संगत ब्राउज़रों में काम नहीं करता है)

Answer 10

JQuery प्लगइन hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html यहाँ सूचीबद्ध भोले दृष्टिकोणों की तुलना में बहुत अधिक है। हालांकि वे निश्चित रूप से काम करते हैं, वे आवश्यक रूप से व्यवहार नहीं कर सकते हैं कि उपयोगकर्ता कैसे उम्मीद करते हैं।

होवरेंट का उपयोग करने का सबसे मजबूत कारण टाइमआउट है सुविधा है। यह आपको एक मेनू को बंद करने से रोकने जैसी चीजों को करने की अनुमति देता है क्योंकि एक उपयोगकर्ता अपने माउस को थोड़ी दूर दाईं या बाईं ओर ले जाता है, इससे पहले कि वे इच्छित आइटम पर क्लिक करें। यह बैराज में हॉवर की घटनाओं को सक्रिय नहीं करने की क्षमता प्रदान करता है और केंद्रित होवरिंग की प्रतीक्षा करता है।

उपयोग उदाहरण:

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

इसका और स्पष्टीकरण https://stackoverflow.com/a/1089381/37055 पर पाया जा सकता है