जावास्क्रिप्ट: मौजूदा एक

Question

ओवरराइट किए बिना ऑनक्लिक हैंडलर जोड़ना मैं एक पृष्ठ पर सभी लिंक संशोधित करने की कोशिश कर रहा हूं ताकि वे क्लिक होने पर कुछ अतिरिक्त काम कर सकें।

function adaptLinks() 
{ 
    var links = document.getElementsByTagName('a'); 
    for(i = 0; i != links.length; i++) 
    { 
     links[i].onclick = function (e) 
     { 
      <do some work> 
      return true; 
     } 
    } 
} 

लेकिन लिंक के कुछ पहले से ही एक onClick हैंडलर कि संरक्षित किया जाना चाहिए है:

एक तुच्छ दृष्टिकोण कुछ इस तरह हो सकता है।

function adaptLinks() 
{ 
    var links = document.getElementsByTagName('a'); 
    for(i = 0; i != links.length; i++) 
    { 
     var oldOnClick = links[i].onclick; 
     links[i].onclick = function (e) 
     { 
      if(oldOnClick != null && !oldOnClick()) 
      { 
       return false; 
      } 
      <do some work> 
      return true; 
     } 
    } 
} 

लेकिन यह काम नहीं करता क्योंकि oldOnClick केवल मूल्यांकन किया जाता है जब हैंडलर कहा जाता है (यह इस बिंदु के रूप में पिछले लिंक के मूल्य में शामिल है): मैं निम्नलिखित की कोशिश की।

Answer 1

आप प्रत्येक लिंक के मूल onclick मूल्य संरक्षित करने के लिए एक बंद बनाना होगा। यह ठीक है अगर आप यही चाहते हैं, लेकिन ध्यान रखें कि यदि आप मूल हैंडलर झूठी वापसी करते हैं तो भी आपको नया ऑनक्लिक हैंडलिंग करना है, तो आपको कोड को थोड़ा संशोधित करना होगा।

comp.lang.javascript FAQ और Douglas Crockford से बंद होने पर अधिक।

Answer 2

सीधे एक ईवेंट हैंडलर के लिए असाइन मत करो: सदस्यता के मॉडल addEventListener/attachEvent बजाय का उपयोग करें (जो भी जोड़े को दूर किया है!)।

अच्छी परिचय here।

Answer 3

addEventListener (DOM समर्थन ब्राउज़र) या attachEvent (IE) के आसपास एक रैपर का उपयोग करें।

ध्यान दें कि यदि आप कभी भी पुराने मान को ओवरराइट किए बिना एक चर में एक मूल्य संग्रहीत करना चाहते हैं, तो आप closures का उपयोग कर सकते हैं।

function chain(oldFunc, newFunc) { 
    if (oldFunc) { 
    return function() { 
     oldFunc.call(this, arguments); 
     newFunc.call(this, arguments); 
    } 
    } else { 
    return newFunc; 
    } 
} 

obj.method = chain(obj.method, newMethod); 

Aspect Oriented Programming में, यह "advice" के रूप में जाना जाता है।

Answer 4

oldClick = links[i].onclick or an empty function सेटिंग के बारे में कैसे। जैसा तो

var oldOnClick = links[i].onclick || function() { return true; }; 

links[i].onclick = function (e) 
    { 
     if (!oldOnClick()) 
      return false; 
     //<do some work> 
     return true; 
    } 

या आप attachEvent इस्तेमाल कर सकते हैं और addEventListener के रूप में दूसरों

function addEvent(obj, type, fn) { 
     if (obj.addEventListener) 
       obj.addEventListener(type, fn, false); 
     else if (obj.attachEvent) 
       obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);}); 
} 

की सिफारिश की है और इतने

addEvent(links[i], 'click', [your function here]); 

Answer 5

JQuery का उपयोग करते हुए की तरह का उपयोग किया है, निम्नलिखित कोड काम करता है:

function adaptLinks(table, sortableTable) 
{ 
    $('a[href]').click(function (e) 
    { 
     if(!e.isDefaultPrevented()) 
     { 
      <do some work> 
     } 
    }); 
} 

इसके लिए एक अतिरिक्त लाइब्रेरी का उपयोग करने की आवश्यकता है लेकिन addEventListener/attachEvent (this references के साथ बाद की समस्या की तरह) के साथ मौजूद कुछ मुद्दों से बचाता है।

सिर्फ एक ख़तरा है: यदि मूल onClick हैंडलर "सामान्य" जावास्क्रिप्ट, लाइन

... 
if(!e.isDefaultPrevented()) 
... 

हमेशा सच हो जाएगी का उपयोग कर असाइन किया गया है, यहाँ तक कि मामले में मूल हैंडलर रद्द झूठी वापसी से घटना। इसे ठीक करने के लिए, मूल हैंडलर को JQuery का भी उपयोग करना होगा।कि इस कार्यान्वयन केवल प्रदर्शन नई onclick निपटने यदि मूल onclick हैंडलर सच रिटर्न

<a href="#" onclick="alert('hi');return false;">Hi</a> 
<a href="#" onclick="alert('there');return true;">There</a> 
<script type="text/javascript"> 
function adaptLinks() { 
    var links = document.getElementsByTagName('a'); 
    for (i = 0; i != links.length; i++) { 
     links[i].onclick = (function() { 
      var origOnClick = links[i].onclick; 
      return function (e) { 
       if (origOnClick != null && !origOnClick()) { 
        return false; 
       } 
       // do new onclick handling only if 
       // original onclick returns true 
       alert('some work'); 
       return true; 
      } 
     })(); 
    } 
} 
adaptLinks(); 
</script> 

नोट:

Answer 6

इस समारोह प्रयोग करने योग्य होना चाहिए (घटना श्रोताओं दृष्टिकोण):

function addEventListener(element, eventType, eventHandler, useCapture) { 
    if (element.addEventListener) { 
     element.addEventListener(eventType, eventHandler, useCapture); 
     return true; 
    } else if (element.attachEvent) { 
     return element.attachEvent('on' + eventType, eventHandler); 
    } 
    element['on' + eventType] = eventHandler; 
} 

या आप कुछ और कोड इस समारोह जोड़ने बचा सकता है (यदि आप कई तत्वों के लिए एक ही घटना श्रोता जोड़ने की जरूरत है):

function addClickListener(element) { 
    addEventListener(element, 'click', clickHandler, false); 
} 

Answer 7

मैं सरल तरीके से अधिक भार के साथ समस्याओं था - यह पेज एक महान संसाधन http://www.quirksmode.org/js/events_advanced.html