2011-10-16 8 views
9

लिनक्स पर अधिकांश ब्राउज़रों में, CTRL + (WHEEL) SCROLL उपयोगकर्ता को सभी तत्वों के आकार को बढ़ाने या घटाने के द्वारा पृष्ठ को ज़ूम इन और आउट करने की अनुमति देता है। अब मैं इस व्यवहार को ओवरराइड और एक एसवीजी तत्व परिवर्तनों affine लगाने से मेरे पास में ज़ूम करने CTRL + पहिया प्राप्त करना चाहते हैं।ब्राउज़र को ओवरराइड करें CTRL + (WHEEL) स्क्रॉल जावास्क्रिप्ट

क्या यह संभव है? विशेष रूप से, क्या इस कीबोर्ड/माउस ईवेंट को पकड़ना और ब्राउज़र के डिफ़ॉल्ट व्यवहार को दबाना संभव है?

उत्तर

13

इस तरह एक सवाल में कठिनाइयों का एक बहुत हैं। असल में, वहाँ दो चरण हैं:

  1. keydown और keyup घटनाओं के लिए सुनो, और जब Ctrl नीचे है का ट्रैक
  2. माउस व्हील के लिए सुनो रखने के लिए, और (यदि Ctrl नीचे है) करते हैं क्या आप

चाहते लेकिन यहाँ समस्या का समाधान करने के लिए है इस प्रकार हैं:

  • आप ईवेंट श्रोताओं/हैंडलर को कैसे लागू कर रहे हैं?
  • According to QuirksMode, मैक पर ब्राउज़र Ctrl के लिए एक सटीक कीकोड नहीं लौटाते हैं।
  • Also according to QuirksMode, फायरफॉक्स mousewheel घटना का समर्थन नहीं करता। आपको इसके बजाय DOMMouseScroll का उपयोग करना होगा।
  • According to the MDC, ऐसे कुछ उदाहरण हैं जहां DOMMouseScroll ईवेंट, Ctrl के साथ उपयोग किए जाने पर, कभी भी निकाल दिया नहीं जाता है!

मैं यह नहीं कह रहा हूं कि वे दुर्बल हैं, या यहां तक ​​कि वे बड़ी समस्याएं हैं। एक अच्छी जावास्क्रिप्ट लाइब्रेरी का उपयोग करना उनमें से अधिकतर को दूर करना चाहिए, अगर सब कुछ नहीं। समर्थन करने के लिए ब्राउज़रों/ओएस की अपनी पसंद में चुनिंदा होने से यह काफी मददगार होगा, अगर यह करने योग्य है।

अगर मैं jQuery (और a jQuery mousewheel plugin) के साथ ऐसा कर रहे थे, यह कुछ इस तरह दिखेगा:

(function ($) { 
    var isCtrl = false; 

    function ctrlCheck(e) { 
     if (e.which === 17) { 
      isCtrl = e.type === 'keydown' ? true : false; 
     } 
    } 

    function wheelCheck(e, delta) { 
     // `delta` will be the distance that the page would have scrolled; 
     // might be useful for increasing the SVG size, might not 
     if (isCtrl) { 
      e.preventDefault(); 
      yourResizeMethod(delta); 
     } 
    } 

    $(document). 
     keydown(ctrlCheck). 
     keyup(ctrlCheck). 
     mousewheel(wheelCheck); 
}(jQuery)); 
1

https://developer.mozilla.org/en/Code_snippets/Miscellaneous#Detecting_mouse_wheel_events सहित, सैद्धांतिक रूप से, Ctrl + माउसव्हील घटनाओं — लेकिन यह कहा गया है कि यदि उपयोगकर्ताओं की प्राथमिकताओं को इस तरह कर रहे हैं एक दिया संशोधक + माउसव्हील संयोजन पाठ का आकार बदलता है, तो इन फ़ायरफ़ॉक्स — में माउसव्हील घटनाओं के लिए कोई हैंडलर जोड़ने का तरीका बताया घटना-श्रोताओं नहीं कहा जाएगा। इसलिए, ऐसा प्रतीत नहीं होता है (हालांकि मैंने उस पृष्ठ की सटीकता की पुष्टि करने के लिए स्वयं का परीक्षण नहीं किया है)।

अन्य ब्राउज़रों निश्चित रूप से अलग तरीके से व्यवहार कर सकते हैं। यदि आप ओके हैं यह फ़ायरफ़ॉक्स में काम नहीं कर रहा है, आप window.onmousewheel सेट करके अपने हैंडलर को पंजीकृत करने का प्रयास कर सकते हैं।

2

sdleihssirhc के जवाब देने के लिए पर जोड़ने के लिए ... इसके बजाय अपने आप को आप कुंजी ctrl का ट्रैक रखने के पहिया में e.ctrlKey को कॉल कर सकते हैं चेक विधि (isCtrl के स्थान पर)। यदि ctrl कुंजी नीचे था तो यह सच हो जाएगा।

मैंने अन्य प्लेटफ़ॉर्म पर इस काम की पुष्टि नहीं की है, लेकिन विंडोज़ में यह क्रोम, एक्सप्लोरर और फ़ायरफ़ॉक्स में काम करता है।

संबंधित मुद्दे