1

次のコードは、IE 以外の他のブラウザーでは正常に動作しています。私のコードは次のとおりです。

<script lang="javascript" type="text/javascript">
  alert("fdgdfgdfg");
  var canvas;
  var ctx;
  var canX;
  var canY;
  var rltvX;
  var rltvY;
  var x = "black";
  var flag = false;
  var w, h;
  function init() {
    alert("aaaaaaaaaaa");
    alert("bbbbbbbbbbb");
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;
    canvas.addEventListener("mousemove", function(e) {findxy('move', e);}, false);
    canvas.addEventListener("mousedown", function(e) {findxy('down', e);}, false);
    canvas.addEventListener("mouseup", function(e) {findxy('up', e);}, false);
    canvas.addEventListener("mouseout", function(e) {findxy('out', e);}, false);
    canvas.addEventListener("touchstart", touchDown, false);
    canvas.addEventListener("touchmove", move, true);
    canvas.addEventListener("touchend", touchUp, false);
    document.body.addEventListener("mouseup", mouseUp, false);
    document.body.addEventListener("touchcancel", touchUp, false);
  }
  function findxy(res, e) {
    if (res == 'down') {
      canX = e.clientX - canvas.offsetLeft-5;
      canY = e.clientY - canvas.offsetTop-25;
      flag = true;
      dot_flag = true;
      if (dot_flag) {
        ctx.beginPath();
        ctx.fillStyle = x;
        ctx.fillRect(canX, canY, 2, 2);
        ctx.closePath();
        dot_flag = false;
      }
    }
    if (res == 'up' || res == "out") {
      flag = false;
    }
    if (res == 'move') {
      if (flag) {
        rltvX = canX;
        rltvY = canY;
        canX = e.clientX - canvas.offsetLeft-5;
        canY = e.clientY - canvas.offsetTop-25;
        ctx.beginPath();
        ctx.moveTo(rltvX, rltvY);
        ctx.lineTo(canX, canY);
        ctx.strokeStyle = x;
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.closePath();
      }
    }
  }
  function touchDown(e) {
    if (!e)
      var e = event;
    e.preventDefault();
    canX = e.targetTouches[0].pageX - canvas.offsetLeft-5;
    canY = e.targetTouches[0].pageY - canvas.offsetTop-25;
    ctx.beginPath();
    ctx.fillStyle = x;
    ctx.fillRect(canX, canY, 2, 2);
    ctx.closePath();
  }
  function move(e) {
    if (!e)
      var e = event;
    e.preventDefault();
    rltvX = canX;
    rltvY = canY;
    canX = e.targetTouches[0].pageX - canvas.offsetLeft-5;
    canY = e.targetTouches[0].pageY - canvas.offsetTop-25;
    ctx.beginPath();
    ctx.strokeStyle = x;
    ctx.lineWidth = 2;
    ctx.moveTo(rltvX, rltvY);
    ctx.lineTo(canX, canY);
    ctx.stroke();
  }
</script>

エラーは、オブジェクト「キャンバス」がメソッドをサポートしていないことaddEventListener()です。これは、IE を除くすべてのブラウザで正しく機能しています。代替手段はありますか？

4

1 に答える 1

3

IE8を使用している場合は、のattachEvent()代わりにメソッドを使用する必要がありaddEventListener()ます。つまり、最初にユーザーが使用しているブラウザを確認してから、要素に対して正しいメソッドを呼び出す必要があります。

使用する方法を確認する方法を編集します。

if (el.addEventListener){
  el.addEventListener(...); 
} else if (el.attachEvent){
  el.attachEvent(...);
}

elDOM要素はどこにありますか。

于 2013-02-12T13:58:22.580 に答える