2010-04-17 11 views
14

मैं एक छोटे से स्केचपैड बनाने के लिए एचटीएमएल 5 और कुछ जावास्क्रिप्ट के साथ खेल रहा हूं। जब भी मैं क्रोम में कैनवास पर क्लिक करता हूं, कर्सर टेक्स्ट कर्सर बन जाता है। मैंने कर्सर डालने की कोशिश की है: सीएसएस में हाथ, लेकिन यह काम नहीं लग रहा है। यह एक आसान बात हो गया है, लेकिन मैं इसे देख सकते हैं और नहीं के बजाय कहीं भी इसे पा सकते हैंएचटीएमएल 5 कैनवास हाथ कर्सर की समस्या

+4

ठीक है, पहले इसे "कर्सर: पॉइंटर" नहीं "कर्सर: हाथ" ... – animuson

उत्तर

7

उपयोग अपने कर्सर संपत्ति के लिए pointer, इस तरह:

canvas { cursor: pointer; } 

hand आईई/ओपेरा विशिष्ट है, you can see a full list of which cursors work in which browsers here

+0

विशेष रूप से यह नोट उल्लिखित लिंक http://www.quirksmode.org/css/cursor.html#note –

+0

में सहायक है मैंने इसे अंदर रखा लेकिन अभी भी वही काम कर रहा हूं। इसे यहां देखें: http://p-func.com/html5_test/test2.html – pfunc

+0

@pfunc - मैं सीधे आपके पृष्ठ को डीबग नहीं कर सकता, इसमें कुछ अमान्य गुण हैं जिन्हें सुधारने की आवश्यकता है ... '' हो, वे '

18

कैनवास पर अक्षम टेक्स्ट चयन का उपयोग करें। यह एक आकर्षण की तरह काम करता है।

var canvas = document.getElementById('canvas'); 
canvas.onselectstart = function() { return false; } // ie 
canvas.onmousedown = function() { return false; } // mozilla 

चीयर्स, क्रिस

+2

सुंदर! मैं थोड़ी देर के लिए इसका समाधान ढूंढ रहा था, जिसने सपना देखा होगा कि यह इतना आसान था? इंटरवेब्स के संपादन के लिए: "वापसी झूठी" विधि कर्सर को क्रोम में आई-बीम में बदलने से रोकती है। मुझे पता है कि एटवुड लोगों को उनकी टिप्पणियों में कृतज्ञता से कृतज्ञता दिखाते हुए नापसंद करते हैं, लेकिन वैसे भी धन्यवाद! – Toji

+2

वेबकिट ब्राउज़र के लिए आप 'body {-webkit-user-select भी जोड़ सकते हैं: none; } 'अपने सीएसएस में। – Jacksonkr

+0

अच्छा! इससे मुझे काफी समय बचाया! – BaronVonKaneHoffen

12

अन्य लोग बिल्कुल quirksmode संदर्भ के लिए आप बात कर पर टकरा रहे थे, कि समस्या आप कर रहे हैं ठीक नहीं होगा, और अनिवार्य रूप आप का एक परिवर्तन लागू करने की आवश्यकता क्रिस का जवाब

मेरे अपने कार्यान्वयन में, मैंने पाया कि mousedown घटना में डिफ़ॉल्ट व्यवहार को रोकने कि सभी कि परेशान पाठ चयन कर्सर को रोकने के लिए आवश्यक किया गया था:

function handleMouseDown(evt) { 
    evt.preventDefault(); 
    evt.stopPropagation(); 

    // you can change the cursor if you want 
    // just remember to handle the mouse up and put it back :) 
    evt.target.style.cursor = 'move'; 

    // rest of code goes here 
} 

document.addEventListener('mousedown', handleMouseDown, false); 

आशा है कि मदद करता है।

चीयर्स, डेमन।

+0

हां, इससे मदद मिली। धन्यवाद! – shino

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