jQuery मोबाइल के बिना मोबाइल पर mousedown घटना का उपयोग कर?

Question

मैंने एक वेबपैप बनाया है, और थोड़ी सी पॉलिश के लिए, मैं छवियों को स्वैप करने के लिए मूसडाउन और माउसअप हैंडलर जोड़ना चाहता था (इस मामले में, बटन को दबाए जाने की तरह दिखने के लिए)।

मेरे कोड कुछ इस तरह है:

window.onload = function() { 
    //preload mouse down image here via Image() 
    $("#button_img").mousedown(function(){$("#button_img").attr("src","button_on.png");}); 
    $("#button_img").mouseup(function(){$("#button_img").attr("src","button_off.png")}); 
} 

यह डेस्कटॉप पर कामयाबी से काम करता है, लेकिन मोबाइल (आईओएस सफारी में परीक्षण) पर, mousedown और mouseup घटनाओं, एक ही समय में हो तो प्रभावी ढंग से कुछ नहीं होता ।

//include jquerymobile.js and jquerymobile.css 
window.onload = function() { 
    //preload mouse down image here via Image() 
    $("#button_img").vmousedown(function(){$("#button_img").attr("src","button_on.png");}); 
    $("#button_img").vmouseup(function(){$("#button_img").attr("src","button_off.png")}); 
} 

बस मुझे त्रुटियों कि vmousedown और vmouseup मौजूद नहीं है दिया:

मैं हालांकि इस कोड jquerymobile में vmousedown और vmouseup घटनाओं का उपयोग करने की कोशिश की,। इसके अलावा, jQueryMobile उस सीएसएस को ओवरराइड करता है जिसे मैंने पहले ही पृष्ठ के लिए लिखा है।

तो क्या काम करने के लिए vmousedown और vmouseup प्राप्त करने का कोई तरीका है, और ऐसा करने के लिए jQuery मोबाइल के सीएसएस के बिना ऐसा करने के लिए?

अग्रिम धन्यवाद
-Esa

Answer 1

आप touchstart और touchend के लिए देख रहे हैं। वे घटनाएं हैं जो vmousedown और vmouseup नकल करने का प्रयास करती हैं।

window.onload = function() { 
    //preload mouse down image here via Image() 
    $("#button_img").bind('touchstart', function(){ 
     $("#button_img").attr("src","button_on.png"); 
    }).bind('touchend', function(){ 
     $("#button_img").attr("src","button_off.png"); 
    }); 
} 

यह है कि स्पर्श इवेंट का समर्थन करता है किसी भी डिवाइस पर किसी भी रूपरेखा के बिना काम करेंगे:

यहाँ एक उदाहरण है। आप इस परीक्षण को करने के लिए Modernizr जैसे कुछ उपयोग कर सकते हैं और यदि डिवाइस स्पर्श ईवेंट का समर्थन नहीं करता है, तो नियमित डेस्कटॉप ईवेंट से जुड़ें।

जब आप touchstart/touchend/touchmove का उपयोग आप कुछ रोचक जानकारी, उदाहरण के लिए कितने छूता है एक बार में घटित हो रहा है, तो आप पता लगा सकते हैं, तो उपयोगकर्ता स्क्रॉल या ज़ूम करने के लिए प्रयास कर रहा है मिलता है।

अद्यतन

के बाद से एक ईवेंट हैंडलर के अंदर event वस्तु स्पर्श घटनाओं और माउस की घटनाओं के लिए अलग है, अगर आप इस घटना के निर्देशांक जानना चाहते किसी भी तरह, आप कुछ इस तरह (नीचे उदाहरण क्या कर सकते हैं Modernizr लोड किया गया है ग्रहण):

//determine which events to use 
var startEventType = 'mousedown', 
    endEventType = 'mouseup'; 

if (Modernizr.touch === true) { 
    startEventType = 'touchstart'; 
    endEventType = 'touchend'; 
} 

//bind to determined event(s) 
$("#button_img").bind(startEventType, function(event) { 

    //determine where to look for pageX by the event type 
    var pageX = (startEventType === 'mousedown') 
       ? event.pageX 
       : event.originalEvent.touches[0].pageX; 

    ... 
})... 

अद्यतन

मैं इस देख रहा था

//bind to determined event(s) 
$("#button_img").bind('mousedown touchstart', function(event) { 

    //determine where to look for pageX by the event type 
    var pageX = (event.type.toLowerCase() === 'mousedown') 
       ? event.pageX 
       : event.originalEvent.touches[0].pageX; 

    ... 
})... 

आप जल्दी जल्दी में दोनों घटनाओं प्राप्त आप ईवेंट हैंडलर रुके एक टाइमआउट इस्तेमाल कर सकते हैं के बारे में चिंतित हैं, तो: पर और ऐसा लगता है जैसे आप ईवेंट हैंडलर बंधन से पहले घटना प्रकार का पता लगाने की जरूरत नहीं है लगता है:

//create timer 
var timer = null; 

//bind to determined event(s) 
$("#button_img").bind('mousedown touchstart', function(event) { 

    //clear timer 
    clearTimeout(timer); 

    //set timer 
    timer = setTimeout(function() { 

     //determine where to look for pageX by the event type 
     var pageX = (event.type.toLowerCase() === 'mousedown') 
        ? event.pageX 
        : event.originalEvent.touches[0].pageX; 

     ... 

    }, 50); 
})... 

ध्यान दें: आप डेवलपर उपकरणों के साथ जल्दी जल्दी में mousedown और touchstart घटनाओं मजबूर कर सकते हैं, लेकिन मैं असली दुनिया उपयोग के मामले के बारे में यहाँ यकीन नहीं है।

Answer 2

वहाँ एक तरह से vmouseup, vmousedown, vmousemove, vclick, आदि jquerymobile के सभी बाकी (और विशेष रूप साइड इफेक्ट) हो रही है (यानी वृद्धि, अतिरिक्त सीएसएस, और की तरह) के बिना jquerymobile की कार्यक्षमता

प्राप्त करने के लिए है

• http://jquerymobile.com/download-builder/ पर जाएं
• चयन केवल "आभासी माउस (vmouse) बाइंडिंग"
• डाउनलोड यह (केवल घटकों आप की जरूरत के साथ jquerymobile के एक कस्टम निर्माण को डाउनलोड करने के लिए एक उपकरण)।

डाउनलोड में केवल एक ही .js फ़ाइलें होंगी (दोनों न्यूनतम और असम्पीडित संस्करण में)। कोई सीएसएस नहीं

लिंक सादा jQuery के बाद अपने html के शीर्ष में इस स्क्रिप्ट है, और इस तरह इसका इस्तेमाल:

<head> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> 
    <script src="whatever/path/jquery.mobile.custom.min.js"></script> 
    <script> 
    $(function(){ // or replace this with window.onload for that matter 
     // Your code here, e.g. 
     $("#button_img").on("vmousedown", function() { 
     /*whatever*/ 
     }); 
     // CAUTION: this won't work (see note below): 
     // $("#button_img").vmousedown(function(){/*whatever*/}); // WON'T WORK 
    }); 
    </script> 
</head> 

नोट: तरीकों .vmousedown(), .vmouseup(), आदि काम नहीं करेगा। आपको इवेंट श्रोता को .on("vmousedown", ...) से बांधना होगा। सुनिश्चित नहीं हैं कि क्यों: मुझे लगता है कि इस वजह से jquerymobile की बात यह है कि घटनाओं के रूप में एक ही नाम के साथ शॉर्टकट विधियों बनाता है कुछ अन्य मॉड्यूल में है। शायद यह डाउनलोड में यह पता लगाने की जो मॉड्यूल है और शामिल हैं यह करने के लिए संभव है, लेकिन मुझे लगता है कि यह अन्य अवांछित निर्भरता शामिल करने के लिए आप मजबूर होना पड़ा।

Answer 3

आप के बजाय सीएसएस का उपयोग कर अपने बटन स्टाइल माना जाता है? :active स्थिति तब ट्रिगर की जाएगी जब कोई उपयोगकर्ता तत्व को क्लिक/स्पर्श कर रहा हो। यहाँ एक उदाहरण है:

/* Default state */ 
#button_img { 
    background-image: url('button_off.png'); 
} 

/* Clicked/touched state */ 
#button_img:active { 
    background-image: url('button_on.png'); 
} 

सीएसएस बहुत अधिक performant होगा और आप भी बेहतर अलग चिंताओं (प्रदर्शन तर्क बनाम, आदि) के लिए सक्षम हो जाएगा।

जेएसबीन: http://jsbin.com/beyin/1/