1. घर
  2. सवाल और जवाब
  3. z-index'd परतों पर क्लिक ईवेंट को संभालना

z-index'd परतों पर क्लिक ईवेंट को संभालना

2009-06-22 12 views
6

मेरे पास एक मैप एप्लिकेशन में 2 जेड-इंडेक्स परतें हैं जो मैं बना रहा हूं। जब मैं ज़ूम इन करने के लिए परतों पर क्लिक करता हूं तो मुझे एक समस्या है। क्लिक हैंडलर अंतर्निहित जेड-इंडेक्स परत पर है और मैं इसे आग लगाना नहीं चाहता जब ओवरलीइंग परत पर नियंत्रण क्लिक किया जाता है।z-index'd परतों पर क्लिक ईवेंट को संभालना

मेरी समस्या यह है कि घटना बढ़ जाती है इससे कोई फर्क नहीं पड़ता कि घटना की मूल लक्ष्य संपत्ति अंतर्निहित परत में छवि नहीं है जब शीर्ष परत पर कुछ क्लिक किया जाता है। क्या इसका परिवर्तन करने के लिए कोई रास्ता है?

स्रोत

2009-06-22 Alex

उत्तर

4

इसे ईवेंट-बबलिंग कहा जाता है, और आप इसे event.stopPropagation() विधि (event.cancelBubble() आईई में) के साथ नियंत्रित कर सकते हैं। आप तत्वों पर किसी भी विशेषताओं द्वारा बुलाए गए हैंडलरों से सच/झूठी लौटकर इसे नियंत्रित भी कर सकते हैं। यह एक मुश्किल विषय है इसलिए मेरा सुझाव है कि आप कुछ research करें।

जानकारी: cancelBubble, stopPropagation

स्रोत

2009-06-22 08:34:47 SpliFF

+0

इस बुदबुदाती घटना नहीं है है को प्राथमिकता। इवेंट बबलिंग होगा जहां मेरे पास दोनों तत्वों पर एक क्लिक इवेंट हैंडलर होगा। मेरे पास केवल नीचे परत पर एक क्लिक हैंडलर है। – Alex

+0

फिर आपका क्या मतलब है "क्लिक हैंडलर अंतर्निहित ज़िन्डेक्स वाली परत पर है और मैं इसे आग लगाना नहीं चाहता जब ओवरलीइंग परत पर नियंत्रण क्लिक किया जाए।" नियंत्रण भी बुलबुले का उपयोग करें। शायद आप वास्तव में कैप्चर करना चाहते हैं लेकिन यह आईई – SpliFF

+1

द्वारा समर्थित नहीं है, मैं अपनी मूल टिप्पणी वापस लेता हूं! यह वास्तव में घटना बुलबुला है, क्षमा करें। मैंने बोर्ड पर अपना सुझाव लिया और इसे काम कर लिया :) – Alex

1

इस समस्या का समाधान नहीं करता है सीधे इसे एक व्यवहार्य वैकल्पिक हल हो सकता है जब तक एक और अधिक फिटिंग समाधान प्रस्तुत करता है।

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

सरल उदाहरण:

<html> 
<body> 

<script type="text/javascript"> 
function myClickHandle(anID) 
{ 
switch(anID){ 
case 'bottom': 
     alert("I am on the bottom"); 
     break; 
case 'top': 
     alert("I am on the top"); 
     break; 
} 
} 
</script> 

<html> 
<div style="z-index:10"><input type=button value='top' onclick="myClickHandle(this.value)"/></div> 
<div style="z-index:11"><input type=button value='bottom' onclick="myClickHandle(this.value)"/></div> 
</body> 
</html>

स्रोत

2009-06-22 09:25:59

+1

क्या यह अविश्वसनीय रूप से करने के लिए वैसे भी है? यानी जावास्क्रिप्ट को HTML के साथ मिश्रित न करें? – Alex

+0

ग्रीष्मकालीन समाप्ति के बाद खेद है कि मैंने इसे आज रात तक ओवरफ्लो ढेर करने के लिए वापस नहीं बनाया। स्क्रिप्ट टैग आपके हेडर में जा सकता है या कुछ बाहरी फाइल में रह सकता है, उदाहरण के लिए। कार्रवाई शुरू करने के लिए ऑनक्लिक होना चाहिए। –

0

मुझे लगता है कि सबसे अच्छा अभ्यास ईवेंट हैंडलर को अलग करने के लिए है जब ऊपरी परत और जब नियंत्रण निचली परत करने के लिए वापस हो जाता है, तो आप घटनाओं पुनः अनुलग्न कर सकते हैं करने के लिए नियंत्रण ले जाता है।

स्रोत

2009-06-23 19:27:25 Shreyas

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

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