Javascript touchmove與jquery在畫布上獲取文本從跨度

我有以下的Javascript，鼠標懸停工作正常，但touchmove事件不會被解僱，當我從受支持的設備跟蹤線，我在這裏錯過什麼，是在那裏當我們使用觸摸事件將鼠標懸停在範圍上時，如何提醒文本？Javascript touchmove與jquery在畫布上獲取文本從跨度

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6rc1.js"></script> 

<script type="text/javascript"> 
function init() { 
    setupDrawingCanvas(); 
} 

function setupDrawingCanvas() { 

    var x, y, ctx, down=false; 

var canvas = document.getElementById("graph"); 
canvas.width = window.innerWidth-45; 
    canvas.height = window.innerHeight-45; 
var maxLength = (canvas.width > canvas.height) ? canvas.width : canvas.height; 

function onTouchMove(e){ 
if (e.targetTouches.length == 1){ 

     e.preventDefault(); 
     ctx.beginPath(); 
     ctx.moveTo(x,y); 
     ctx.lineTo(e.touches[0].pageX - canvas.offsetLeft, e.touches[0].pageY - canvas.offsetTop); 
     x = e.touches[0].pageX - canvas.offsetLeft; 
     y = e.touches[0].pageY - canvas.offsetTop; 
     ctx.stroke(); 
    } 
} 

function onTouchEnd(e){ 
    if (e.targetTouches.length==1){ 
     e.preventDefault(); 
     window.removeEventListener("touchmove", onTouchMove, false); 
     window.removeEventListener("touchend", onTouchEnd, false); 
    } 
} 
function onTouchStart(e){ 
    if (e.touches.length == 1){ 
     e.preventDefault(); 
     x = e.touches[0].pageX - canvas.offsetLeft; 
     y = e.touches[0].pageY - canvas.offsetTop; 
     window.addEventListener("touchmove", onTouchMove, false); 
     window.addEventListener("touchend", onTouchEnd, false); 
    } 
} 
function dropEvent(e) 
    { 
     e.stopPropagation(); 
     e.preventDefault(); 
    } 

if (canvas.getContext){ 
    ctx = canvas.getContext("2d"); 
    ctx.strokeStyle = "#000000"; 

    canvas.addEventListener("touchstart", onTouchStart, false); 


} 


    var func = (function() {  
       var num = parseInt($(this).text()); 
          alert ("moved over" + num); 

      }); 

    var $graph = $('#graph'); 
        $('<span></span>') 
          .addClass('circle') 
          .html(1) 
          .css({ 'top': 471, 'left': 430 }) 
          .mouseover(func) 
          .insertAfter($graph); 


        $('<span></span>') 
          .addClass('circle') 
          .html(2) 
          .css({ 'top': 451, 'left': 410 }) 
          .mouseover(func) 
          .insertAfter($graph); 

     // This is not being called when the touchevent is over the span 
     $('circle').each.bind('touchmove',function(e) { 

          e.preventDefault(); 
          var num = parseInt($(this).text()); 
          alert ("moved over" + num); 

    }); 


} 

</script> 
<style type="text/css"> 
    .circle { 
     background: url('circle.png'); 
     width: 24px; 
     height: 24px; 
     text-align: center; 
     font-size: .8em; 
     line-height: 24px; 
     display: block; 
     position: absolute; 
     cursor: pointer; 
     color: #333; 
     z-index: 100; 
    } 

    #graph { 
     left: 200px; 
     top: 20px; 
     position: relative; 
     border: 1px dotted #ddd; 
    } 
</style>

<body onload="init();"> 
    <canvas id="graph" width="680" height="680"></canvas> 
</body>

來源

2011-05-03 user94437

修改下面的調用，改變 '圈' 到 '.circle' ......

$('.circle').each.bind('touchmove',function(e) { 
    e.preventDefault(); 
    var num = parseInt($(this).text()); 
    alert ("moved over" + num); 
});

來源

2011-07-14 02:30:20 Jake

Javascript touchmove與jquery在畫布上獲取文本從跨度

回答

相關問題