2008-11-04 9 views
36

क्या मौजूदा ऑन-हाउसओवर, ऑनसाउसआउट और किसी प्रकार के टाइमर के साथ जेएस ऑन होवर ईवेंट स्थापित करने का एक कैननिक तरीका है? या केवल मनमाने ढंग से कार्य करने के लिए कोई विधि अगर केवल तभी उपयोगकर्ता ने कुछ निश्चित समय के लिए तत्व पर आच्छादित किया हो।जावास्क्रिप्ट ऑन होवर इवेंट

उत्तर

12

क्या आप अपना प्रश्न स्पष्ट कर सकते हैं? इस मामले में "ओहहोवर" क्या है और यह होवर समय में देरी के अनुरूप कैसे है?

जिसके अनुसार, मुझे लगता है कि आप शायद चाहते है ...

var timeout; 
element.onmouseover = function(e) { 
    timeout = setTimeout(function() { 
     // ... 
    }, delayTimeMs) 
}; 
element.onmouseout = function(e) { 
    if(timeout) { 
     clearTimeout(timeout); 
    } 
}; 

या addEventListener/attachEvent या अपने पसंदीदा लाइब्रेरी की घटना अमूर्त विधि।

2

मुझे नहीं लगता कि आपको टाइमआउट चाहिए/चाहिए।

ऑनहोवर (होवर) कुछ समय के दौरान "अवधि" के रूप में परिभाषित किया जाएगा। आईएमएचओ

onmouseover = start... 

onmouseout = ...end 

रिकॉर्ड के लिए मैंने आईई 6 में होवर ईवेंट "फर्जी" के साथ कुछ सामान किया है। यह महंगा था और अंत में मैंने प्रदर्शन के पक्ष में इसे हटा दिया।

+0

मुझे उम्मीद है कि टाइमआउट उस घटना को रोकना चाहता है जब उपयोगकर्ता तत्व पर माउस को पास करता है (जैसे दुर्घटना से, या इंटरफ़ेस के किसी अन्य भाग में जाने पर। कल्पना करें कि क्लिक करें खुले मेनू भी होवर-टू-ओपन थे, लेकिन इसमें कोई देरी नहीं थी, तो उपयोगकर्ता को अन्य चीजों के शीर्ष पर तुरंत मेनू के साथ सामना करना पड़ सकता है, जबकि उपयोगकर्ता पेज पर माउस को स्थानांतरित करने की कोशिश कर रहा है। –

+0

@IIsi 50 मेगाहर्ट्ज - यह काफी संभव है, विशेष रूप से अगर ऑनसाउसआउट टाइमर बेली के उत्तर के समान टाइमर को साफ़ करता है। उस वक्त मैंने जवाब दिया था, मैं सोच रहा था कि ओपी संभवत: भ्रमित था कि माउस कैसे चालू/बाहर/प्रवेश/घटनाओं को काम करता है और शिकायतकर्ता के दस्ताने बनाने की कोशिश कर रहा था: http://thedailywtf.com/Articles/The_Complicator_0x27_s_Gloves.aspx – scunliffe

26

इस तरह कुछ कैसे?

<html> 
<head> 
<script type="text/javascript"> 

var HoverListener = { 
    addElem: function(elem, callback, delay) 
    { 
    if (delay === undefined) 
    { 
     delay = 1000; 
    } 

    var hoverTimer; 

    addEvent(elem, 'mouseover', function() 
    { 
     hoverTimer = setTimeout(callback, delay); 
    }); 

    addEvent(elem, 'mouseout', function() 
    { 
     clearTimeout(hoverTimer); 
    }); 
    } 
} 

function tester() 
{ 
    alert('hi'); 
} 

// Generic event abstractor 
function addEvent(obj, evt, fn) 
{ 
    if ('undefined' != typeof obj.addEventListener) 
    { 
    obj.addEventListener(evt, fn, false); 
    } 
    else if ('undefined' != typeof obj.attachEvent) 
    { 
    obj.attachEvent("on" + evt, fn); 
    } 
} 

addEvent(window, 'load', function() 
{ 
    HoverListener.addElem(
     document.getElementById('test') 
    , tester 
); 
    HoverListener.addElem(
     document.getElementById('test2') 
    , function() 
     { 
     alert('Hello World!'); 
     } 
    , 2300 
); 
}); 

</script> 
</head> 
<body> 
<div id="test">Will alert "hi" on hover after one second</div> 
<div id="test2">Will alert "Hello World!" on hover 2.3 seconds</div> 
</body> 
</html> 
11

आप JQuery पुस्तकालय का उपयोग करते हैं आप जो माउसओवर और mouseout घटना विलीन हो जाती है और समय और बच्चे तत्वों के साथ आप में मदद करता है .hover() घटना का उपयोग कर सकते हैं:

$(this).hover(function(){},function(){}); 

पहले समारोह है होवर की शुरुआत और अगला अंत है। और पढ़ें: http://docs.jquery.com/Events/hover

+0

महान सलाह! मुझे लगता है कि यह वास्तव में jQuery के माउसएन्टर और माउसलेव घटनाओं (जो थोड़ा अलग हैं) विलय करता है, वैसे भी। प्रश्न में –

+5

jQuery का उल्लेख नहीं किया गया है। – jguffey