2012-01-18 21 views
5

एक साथ ट्रिगर नहीं कर रही हैं यहां मेरा कोड सेगमेंट है। मैं स्पर्श डिवाइस और डेस्कटॉप में स्क्रॉल के लिए iscroll 4 का उपयोग कर रहा हूँ।सीएसएस पॉइंटर-इवेंट्स संपत्ति परिवर्तन और संबंधित jquery घटनाएं

$('#next_item').bind('mousedown touchstart',function (e) { 
     //do something onclick 
     $(this).bind('mousemove touchmove',function(e){ //triggers only when i drag over it     
       dragstart = true; 
       $(this).css('pointer-events', 'none'); 
       myScroll._start(myDown); 
       return;      
     }); 
}); 

$('#next_item').bind('mouseup touchend',function (e) { 
    if(dragstart) { 
     dragstart = false; 
     $(this).css('pointer-events', 'auto'); 
    } 
}); 

मैं जो एक विशेष कार्य करता है और यह भी #next_item जो विभिन्न कार्य करता है पर खींचें घटना है #next_item पर क्लिक करें घटना है। अब समस्या यह है कि #next_item ड्रैग इवेंट प्राप्त करता है css pointer-events को तुरंत none में बदल दिया गया है लेकिन ड्रैग ट्रिगर नहीं कर रहा है। जब मैं mouseup करता हूं और फिर #next_item से फिर से खींचता हूं तो केवल ड्रैग ट्रिगर होता है। अंतर्निहित तत्व को ड्रैग ईवेंट पास करने के लिए मुझे css pointer-events की आवश्यकता है। कृपया सुझाव दें कि मैं कुछ गलत कर रहा हूं। जबकि नीचे #next_item

+0

आप किस jQuery का उपयोग कर रहे हैं? क्या आपने 'बाइंड' के बजाए jQuery पर 'फ़ंक्शन' की कोशिश की है। jQuery 1.7+ संस्करण के साथ इस काम को याद रखें http://api.jquery.com/on/ – Murtaza

+0

मैं jquery 1.6.2 – user850234

+0

@Murtaza का उपयोग कर रहा हूं: मैंने jquery 'on' function और jquery 1.7 संस्करण का उपयोग करने का प्रयास किया। यह डेस्कटॉप में काम कर रहा है लेकिन इसे आईपैड या आईफोन पर काम नहीं कर सका। क्या आप मेरे कोड स्निपेट में 'ऑन' फ़ंक्शन का उपयोग कर सकते हैं और मुझे काम दिखा सकते हैं। – user850234

उत्तर

3

खींचें घटना गुजर pointer-events iscroll बिना त्रुटि देता है शामिल निम्नलिखित अपने पृष्ठ में <script>:

एचटीएमएल

<head> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 
    <script src="jquery.ui.touch-punch.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $('#widget').draggable(); // This is required for drag... 
     $('#widget').dialog().addTouch(); 

     // Here you call your functions and perform 
     // the functionality for touch and drag... 

    }); 
    </script> 

</head> 
<body> 
    <div id="widget" style="width:200px; height:200px border:1px solid red" ></div> 
</body> 

यह सिर्फ एक उदाहरण है के रूप में मैं क्या कार्यक्षमता पूरी तरह से अनजान हूँ आप अपने कोड स्निपेट से चाहते हैं। यह आपके पूरे प्रश्न का उत्तर नहीं दे सकता है, लेकिन समस्या को हल करने के लिए यह तार्किक प्रवाह है।

4

मुझे अपनी खुद की रोलिंग के बजाय iScroll के साथ प्रदान की गई विधियों का उपयोग करके बेहतर भाग्य मिला है। विशेष रूप से, पहले से स्क्रॉल और ऑनस्कोल एंड पर।

var myScroll; 

function loaded() { 
    myScroll = new iScroll('scroller-parent', { 
     onBeforeScrollStart: function() { 
      $('#scroller').css('opacity',0.5); // just for a visual ref 
      return false; 
     }, 
     onScrollEnd: function() { 
      alert('done'); 
      $('#scroller').css('opacity',1); 
     } 
    }); 
} 

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false); 

इसके अलावा, श्रोताओं को स्पर्श और डोम सहायता के लिए शामिल करना शामिल है। इच्छा है कि मैं वास्तव में जानता था कि आप क्या करने की कोशिश कर रहे थे - शायद आपको एक बेहतर उदाहरण दिखा सकें।

यदि मैं रास्ता बंद कर रहा हूं, तो मैं यह जवाब खींचूंगा। बीटीडब्ल्यू, जेक्यू 1.6.4 इस उत्तर के लिए ठीक काम कर रहा है।

HTH

5
  1. आप .css() साथ एक तत्व के लिए सूचक घटना को निष्क्रिय करना चाहते हों:

    $('#element_id').css('pointer-events','none'); 
    
  2. आप .css() साथ एक तत्व के लिए सूचक घटना सक्षम करना चाहते हैं जब:

    $('#element_id').css('pointer-events',''); 
    

# 1 में, तत्व अक्षम हो जाता है और फिर आप उस तत्व तक नहीं पहुंच सकते हैं।

# 2 में, वही तत्व सक्षम हो जाता है और आप इसके पर अन्य jQuery ऑपरेशन कर सकते हैं।

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