Javascript touchmove与jquery在画布上从span获取文本

发布于 2024-11-04 07:59:12 字数 3528 浏览 2 评论 0原文

我有以下 Javascript，鼠标悬停工作正常，但当我从支持的设备跟踪一条线时，触摸移动事件没有被触发，我在这里缺少什么，当我们使用触摸将鼠标悬停在跨度上时，有没有办法提醒文本事件？

<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>

原文

I have the following Javascript, The mouseover works fine but the touchmove event is not being fired when I trace a line from a supported device, What am I missing here and is there a way to alert the text when we hover over the span using touch event?

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

山有枢 2024-11-11 07:59:12

修改以下调用，将“circle”更改为“.circle”...

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

Modify the following call, changing 'circle' to '.circle'...

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

回复收藏 0 原文

~没有更多了~