Paint App, JQuery mobile - Object Has No Method

问题

I'm really pretty new to code. I'm trying to make a paint app that will work on desktop and mobile. I had it working fine on desktop using JavaScript but then to get it to work on mobile it seemed like JQuery mobile was a recommended method. I'm converting it to JQuery and had the maint working with .mousedown, .mouseup, etc. but when I changed to to .vmousedown, .vmouseup, etc. to have it work with touch I get an error which I can't seem to resolve.

Uncaught TypeError: Object [object Object] has no method 'vmousedown'

I've seen other people with similar issues but I'm having a hard time making it work for me.

JSFiddle - http://jsfiddle.net/mquickel/dehAD/79/

HTML Snippet

<html>
<head>
    <link rel="stylesheet" type="text/css" href="colorCSS2.css">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body data-role="page">
<div id="container">
    <div id="sketch" data-role="content">
        <canvas id="paint" style="z-index: 0; position:absolute;" height="600px" width="600px"></canvas> 
        <canvas id="layer2" style="z-index: 1; position:absolute;" height="600px" width="600px"></canvas> 
    </div>

JS Snippet

    document.getElementById( "container" ).onmousedown = function(event){
    event.preventDefault();
    }

    var layer2 = document.getElementById("layer2");
    var ctx2 = layer2.getContext("2d");
    var imageObj = new Image();
    /* Loading the Image*/
    imageObj.onload = function() {
        ctx2.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'https://lh5.googleusercontent.com/-P5ucC3TjCLU/UjHE0rENTaI/AAAAAAAAAts/mH2A_OORkQY/s800/color.png';


(function() {
    var canvas = document.getElementById('paint');
    var ctx = canvas.getContext('2d');
    var imageObj = new Image();

    var cont = document.getElementById('container');
    var mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};

    /* Mouse Capturing Work */

    $(cont).mousemove (function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

     mouse.x = e.pageX - this.offsetLeft;
     mouse.y = e.pageY - this.offsetTop;
    });


    /* Drawing on Paint App */
    ctx.lineWidth = 20;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.strokeStyle = brushColor; 


    $(cont).vmousedown(function(e) {
    console.log("hi");
    $(cont).vmousemove (onPaint);
    });


     $(cont).vmouseup (function() {
     console.log("up");
     $(cont).unbind ('vmousemove', onPaint);
     });

    var onPaint = function() {
        ctx.beginPath();
        ctx.moveTo(last_mouse.x, last_mouse.y);
        ctx.lineTo(mouse.x, mouse.y);
        ctx.closePath();
        ctx.stroke();
    };

}());

来源：https://stackoverflow.com/questions/19166529/paint-app-jquery-mobile-object-has-no-method

标签

javascript

jquery

jquery-mobile

mobile