1

有什么特殊方法可以让 Android 的浏览器响应点击/按下事件吗？我的代码在流行的浏览器中运行良好，但是当我使用我的 Android 平板电脑或 Android 手机时，节点在拖动/按下时不会移动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<style type="text/css">
html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}
#blurb_canvas {
  position: absolute; 
  top: 0px;
  left: 150px;
} 
#blurb_data_holder {
  height: 100%;
  width: 150px;
  top: 0px;
  left: 0px;
  overflow-y: auto;
} 
input.blurb_btn {
    background-color: #eaeaea;
    font-weight: bold;
    border: solid 1px #c5c5c5;
    cursor: pointer;
    width: 9em;
    height: 2em;
    padding: 5px;
} 
</style>
<body onLoad="init();">

    <table id="blurb_data_holder">
        <tr>
            <td align="center" valign="top">
            <input type="submit" title="" value="Data 1" id="data_1" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
            <input type="submit" title="" value="Data 2" id="data_2" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
            <input type="submit" title="" value="Data 3" id="data_3" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
            <input type="submit" title="" value="Data 4" id="data_4" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
            <input type="submit" title="" value="Data 5" id="data_5" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
            </td>
        </tr>
    </table>




    <canvas id="blurb_canvas">If you are able to see this message, your browser does not support HTML5's canvas feature.</canvas>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    var canvasLay;
    var canvasContext;
    var blurbNodes;
    var x = 50;
    var y = 50;
    var movingObj = false;
    var movinganotherObj = false;
    var blurbSentences;

    function init(){
        canvasLay = document.getElementById('blurb_canvas');
        canvasContext = canvasLay.getContext('2d');
        canvasLay.width = window.innerWidth-150;
        canvasLay.height = window.innerHeight;

        blurbNodes = [];
        blurbNodes.push(new BlurbNode(300,75,60,1,1,'stuff here a'));
        blurbNodes.push(new BlurbNode(600,300,60,1,1,'stuff here b'));
        setInterval(drawScreen,25);
        canvasLay.addEventListener("mousedown", beginMovingObj, false);
        canvasLay.addEventListener("mousemove", moveObj, false);
        canvasLay.addEventListener("mouseup", stopMovingObj, false);
    }

    function createBlurbNode(text){
        blurbNodes.push(new BlurbNode(100,100,60,1,1,text));
    }

    function BlurbNode(positionx, positiony, radius, dx, dy, label){
        this.canvas = canvasLay;
        this.context = canvasContext;
        this.positionx = positionx;
        this.positiony = positiony;
        this.radius = radius;
        this.dx = dx;
        this.dy = dy;
        this.label = label;
        this.moving = false;
        this.hasChild = false;
        this.hasParent = false;
    }

    BlurbNode.prototype.Create = function(){
        this.context.fillStyle = '#ff0000';
        this.context.beginPath();
        this.context.arc(this.positionx, this.positiony, this.radius, 0, Math.PI*2, true); 
        this.context.closePath();
        this.context.fill();
        this.context.fillStyle = '#000000';
        this.context.fillText(this.label,this.positionx-20,this.positiony);
    };

    function drawLineConnection(parentCenterx, parentCentery, childCenterx, childCentery){
        canvasContext.beginPath();
        canvasContext.fillStyle = '#000000';
        canvasContext.moveTo(parentCenterx, parentCentery);
        canvasContext.lineTo(childCenterx, childCentery);
        canvasContext.stroke();
    }

    function drawScreen(){  
        canvasLay.width = window.innerWidth-150;
        canvasLay.height = window.innerHeight;
        canvasContext.clearRect(0,0,screen.width,screen.height);

        for(i = 0; i<blurbNodes.length; i++){

            if(movingObj){
                if(!movinganotherObj && (x > blurbNodes[i].positionx-50 && x < blurbNodes[i].positionx+50) && (y > blurbNodes[i].positiony && y < blurbNodes[i].positiony+50)){
                    blurbNodes[i].moving = true;
                    movinganotherObj = true;
                }

                if(blurbNodes[i].moving && x < (canvasLay.width-60) && y < (canvasLay.height-60) && x > (60) && y > (60)){
                    blurbNodes[i].positionx = x;
                    blurbNodes[i].positiony = y;
                }
            }else{
                blurbNodes[i].moving = false;
            }

            if(!blurbNodes[i].hasChild && !blurbNodes[i].hasParent && !blurbNodes[i].moving && blurbNodes[i].positiony < canvasLay.height-60){
                blurbNodes[i].positiony = blurbNodes[i].positiony + blurbNodes[i].dy;
            }
            blurbNodes[i].Create();


            for(j = 0; j<blurbNodes.length; j++){
                if(blurbNodes[i] != blurbNodes[j] && 
                        Math.abs(blurbNodes[i].positionx - blurbNodes[j].positionx) < 150 &&
                        Math.abs(blurbNodes[i].positiony - blurbNodes[j].positiony) < 150){
                    drawLineConnection(blurbNodes[i].positionx, blurbNodes[i].positiony, blurbNodes[j].positionx, blurbNodes[j].positiony);
                    blurbNodes[i].hasChild = true;
                    blurbNodes[j].hasParent = true;
                }
            }
        }
    }


    function beginMovingObj(e) {
        movingObj = true;
    }
    function stopMovingObj(e) {
        movingObj = false;
        movinganotherObj = false;
    }
    function moveObj(e) {
        if(movingObj){
            x = e.pageX-150;
            y = e.pageY;
        }
    }
</script>

</body>
</html>
4

2 回答 2

1

在这里，这有效：

http://jsfiddle.net/simonsarris/W45jt/

你真正缺少的是'touchstart'、'touchmove'和'touchend'事件来补充你的鼠标事件。

你真的应该比我更好地组织它，这只是启动示例并运行的最快的代码。

于 2012-06-16T03:39:39.467 回答
0

我最近修改了一些用于绘图的代码，并且需要在一些地方寻找正确的事件属性。以下代码适用于我。希望它会帮助你。

drawStart = function(ev) {
        if(ev.originalEvent.touches && ev.originalEvent.touches.length) {
            ev = ev.originalEvent.touches[0];
        } else if(ev.originalEvent.changedTouches && ev.originalEvent.changedTouches.length) {
            ev = ev.originalEvent.changedTouches[0];
        }

        // Calculate the current mouse X, Y coordinates with canvas offset
        var x, y;
        x = ev.pageX - $(doodle.canvas).offset().left;
        y = ev.pageY - $(doodle.canvas).offset().top;
...
于 2012-06-15T22:47:17.437 回答