2010-02-09 6 views
18

में प्रोग्रामेटिक रूप से ट्रिगर ऑनमाउसओवर कार्यक्रम सादा जावास्क्रिप्ट में onmouseover ईवेंट प्रोग्रामेटिक रूप से ट्रिगर करने का कोई तरीका है? या onmouseover ईवेंट से सीधे इसे कॉल करने के लिए विधि निकालें? इसलिए onmouseover नीचे div में निकाल दिया नहीं होगाजावास्क्रिप्ट

जैसे

<div id="bottom-div" onmouseover="myFunction('some param specific to bottom-div');"> 
    <div id="top-div" onmouseover="????????"></div> 
</div> 

शीर्ष div, नीचे-div से ऊपर है। मैं शीर्ष div

+0

आप jQuery बाँध –

+2

आप इस की कोशिश की है उपयोग कर सकते हैं: यहाँ प्रतीत होता है सिद्ध संस्करण (फिर से केवल IE9 परीक्षण किया) है? पेरेंट इवेंट पर ऑनहाउसओवर इवेंट _should_ आग भी घटना प्रसार के लिए धन्यवाद। –

+0

ठीक है, मैंने इसके बारे में नहीं सोचा था, माफ करना यह थोड़ा बुरा उदाहरण है क्योंकि मेरे ऐप में वे वास्तव में घोंसला वाले तत्व नहीं हैं। शीर्ष div पूरी तरह से कई अन्य तत्वों पर स्थित है। – fearofawhackplanet

उत्तर

-3

से myFunction('some param specific to bottom-div'); बुलाने की कोई तरीका होना चाहिए आप इसे कुछ इस तरह करना होगा: एक मुद्दा विचार किया जा रहा से पहले लायक परीक्षण

document.getElementById('top-div').onmouseover(); 

लेकिन, जैसा कि टिप्पणी में उल्लेख किया है, यह होगा।

+0

मुझे नहीं पता था कि यह इतना आसान था! मुझे यकीन है कि मैंने पहले ऑनक्लिक के साथ ऐसा करने की कोशिश की है और यह काम नहीं करता है। शायद मेरी याददाश्त खराब है। – fearofawhackplanet

+2

मुझे यकीन नहीं है कि यह कभी काम करता है, लेकिन मेरा मानना ​​है कि इसे कम से कम 'ऑन' उपसर्ग के बिना होना चाहिए। –

+13

काम नहीं करता 'Uncaught TypeError: e.previousElementSibling.onmouseover एक फ़ंक्शन नहीं है (...) ' – Green

1
​<a href="index.html" onmouseover="javascript:alert(0);" id="help"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​>help</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

​document.getElementById('help').onmouseover();​​​​​​​ 
2

मैं इसी तरह कुछ करने के लिए की जरूरत है, लेकिन मैं jQuery का उपयोग कर रहा है, और मैं इस एक बेहतर समाधान हो पाया:

उपयोग jQuery के ट्रिगर समारोह।

$j('#top-div').trigger('mouseenter'); 

यदि आपको आवश्यकता हो तो आप इसमें पैरामीटर भी जोड़ सकते हैं। jQuery documentation on .trigger देखें।

+1

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

24

यह कम से कम IE9 में मेरे लिए काम किया। , संगत या इसे बंद करने के क्रॉस-ब्राउज़र होना चाहिए ...

function FireEvent(ElementId, EventName) 
{ 
    if(document.getElementById(ElementId) != null)  
    { 
     if(document.getElementById(ElementId).fireEvent) 
     { 
      document.getElementById(ElementId).fireEvent('on' + EventName);  
     } 
     else 
     { 
      var evObj = document.createEvent('Events'); 
      evObj.initEvent(EventName, true, false); 
      document.getElementById(ElementId).dispatchEvent(evObj); 
     } 
    } 
} 

onmouseover उदाहरण के लिए

FireEvent(ElementId, "mouseover"); 
+4

इसके लायक होने के लिए, 'initEvent' को बहिष्कृत किया गया है और एमडीएन https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent के अनुसार भरोसा नहीं किया जाना चाहिए .. और उदाहरण जो हो सकता है उपरोक्त 'else' ब्लॉक में है: 'var event = new MouseEvent (EventName, {' view ': विंडो,' बुलबुले ': सत्य,' रद्द करने योग्य ': सत्य}); document.getElementById (ElementId) .dispatchEvent (ईवेंट); ' – jamez14

6

बहुत अधिक विस्तार में जाने के बिना इस तरह फ़ंक्शन को कॉल करें, मैं रोलओवर के साथ एक img था, यानी माउसआउट/ओवर जो छिपे हुए फॉर्म मानों में img src सेट करते हैं (या यह gloabl चर के साथ एक अलग संदर्भ में किया हो सकता है)। मैंने अपने दोनों ओवर/आउट छवि मानों को स्वैप करने के लिए कुछ जावास्क्रिप्ट का उपयोग किया और मैंने फायरएवेंट (एलिमेंटआईडी, "माउसओवर") कहा जाता है; परिवर्तन को ट्रिगर करने के लिए। मेरा जावास्क्रिप्ट पेज पर तत्व छुपा रहा/प्रदर्शित कर रहा था। इसने कर्सर को कभी-कभी आईएमजी से अधिक होने का कारण बना दिया, जिसका उपयोग मैंने ईवेंट को ट्रिगर करने के लिए किया था - जो कि मैं स्वैपिंग के समान था, और कभी-कभी कर्सर क्लिक के बाद आईएमजी पर नहीं था।

माउसओवर/आउट तब तक आग नहीं लगाता जब तक कि आप किसी तत्व से बाहर निकलें और पुनः दर्ज न करें, इसलिए मेरी घटना के बाद माउसओवर/आउट को नई कर्सर स्थिति के लिए "retriggering" की आवश्यकता होती है। मेरा समाधान यहाँ है। जब मैं विभिन्न पेज तत्वों को छुपा/प्रदर्शित करता हूं, और वर्णित के रूप में अपना img src swapping करने के बाद, मैं FireEvent (ElementId, "mouseover") के बजाय फ़ंक्शन RefreshMouseEvents (ElementId) को कॉल करता हूं।

यह आईई 9 में काम करता है (अन्य ब्राउज़रों के बारे में निश्चित नहीं है)।

function RefreshMouseEvents(ElementId) 
{ 
    FireEvent(ElementId, 'mouseover'); 
    setTimeout("TriggerMouseEvent('" + ElementId + "')" , 1); 
} 

function TriggerMouseEvent(ElementId) 
{ 
    if(IsMouseOver(ElementId, event.clientX, event.clientY)) 
     FireEvent(ElementId, 'mouseover'); 
    else  
     FireEvent(ElementId, 'mouseout'); 
} 

function IsMouseOver(ElementId, MouseXPos, MouseYPos) 
{ 
    if(document.getElementById(ElementId) != null)  
    { 
     var Element = document.getElementById(ElementId); 
     var Left = Element.getBoundingClientRect().left, 
      Top = Element.getBoundingClientRect().top, 
      Right = Element.getBoundingClientRect().right, 
      Bottom = Element.getBoundingClientRect().bottom;  
     return ((MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))  
    } 
    else 
     return false; 
} 

function FireEvent(ElementId, EventName) 
{ 
    if(document.getElementById(ElementId) != null)  
    { 
     if(document.getElementById(ElementId).fireEvent) 
     { 
      document.getElementById(ElementId).fireEvent('on' + EventName);  
     } 
     else 
     { 
      var evObj = document.createEvent('Events'); 
      evObj.initEvent(EventName, true, false); 
      document.getElementById(ElementId).dispatchEvent(evObj); 
     } 
    } 
} 
+0

सेटटाइमआउट को eval के रूप में उपयोग न करें! इसके बजाय, 'Function.prototype.bind' का उपयोग करें। –

5

मुझे अधिक परीक्षण के बाद कार्यों के अपने RefreshMouseEvents सेट को संशोधित करना पड़ा।

function RefreshMouseEvents(ElementId) 
{ 
    FireEvent(ElementId, 'mouseover'); 
    setTimeout("TriggerMouseEvent('" + ElementId + "', '" + event.clientX + "', '" + event.clientY + "')", 1); 
} 

function TriggerMouseEvent(ElementId, MouseXPos, MouseYPos) 
{ 
    if(IsMouseOver(ElementId, (1*MouseXPos), (1*MouseYPos))) 
     FireEvent(ElementId, 'mouseover'); 
    else  
     FireEvent(ElementId, 'mouseout'); 
} 

function IsMouseOver(ElementId, MouseXPos, MouseYPos) 
{ 
    if(document.getElementById(ElementId) != null)  
    { 
     var Element = document.getElementById(ElementId); 
     var Left = Element.getBoundingClientRect().left, 
      Top = Element.getBoundingClientRect().top, 
      Right = Element.getBoundingClientRect().right, 
      Bottom = Element.getBoundingClientRect().bottom;  
     return ((MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))  
    } 
    else 
     return false; 
} 

function FireEvent(ElementId, EventName) 
{ 
    if(document.getElementById(ElementId) != null)  
    { 
     if(document.getElementById(ElementId).fireEvent) 
     { 
      document.getElementById(ElementId).fireEvent('on' + EventName);  
     } 
     else 
     { 
      var evObj = document.createEvent('Events'); 
      evObj.initEvent(EventName, true, false); 
      document.getElementById(ElementId).dispatchEvent(evObj); 
     } 
    } 
} 
संबंधित मुद्दे