因为（MouseUp mouseDown）不在使用mbbile浏览器吗？

我的代码需要鼠标位置。移动浏览器支持html5。但不能使用MouseUp mouseDown 我该如何解决它？因为（MouseUp mouseDown）不在使用mbbile浏览器吗？

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 

 
    <body style="background-color:3F6E6F;"> 
 
    <style> 
 
     body { 
 
     margin: 0px; 
 
     padding: 0px; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <canvas id="myCanvas" width="1200" height="1000" onmousedown="mouseDown()" onmouseup="mouseUp()"></canvas> 
 
    <p id="demo"></p> 
 

 

 
    <script> 
 
    var depx = 0; 
 
    var depy = 0; 
 
    var flag = 0; 
 

 
    function writeMessage(canvas, message) { 
 
     var context = canvas.getContext('2d'); 
 
     context.clearRect(0, 0, canvas.width, canvas.height); 
 
     context.font = '18pt Calibri'; 
 
     context.fillStyle = 'black'; 
 
     context.fillText(message, 10, 25); 
 
    } 
 

 

 
    function getMousePos(canvas, evt) { 
 
     var rect = canvas.getBoundingClientRect(); 
 
     return { 
 
     x: evt.clientX - rect.left, 
 
     y: evt.clientY - rect.top 
 
     }; 
 
    } 
 

 

 
    var canvas = document.getElementById('myCanvas'); 
 
    var context = canvas.getContext('2d'); 
 

 

 
    function mouseDown() { 
 
     canvas.addEventListener("mousemove", myFunction); 
 
    } 
 

 

 

 

 
    function myFunction(evt) { 
 
     var mousePos = getMousePos(canvas, evt); 
 
     if (flag == 0) { 
 
     depx = mousePos.x; 
 
     depy = mousePos.y; 
 
     } 
 
     flag = 1; 
 

 

 
     var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + ' abs position ' + (mousePos.x - depx) + ',' + (mousePos.y - depy); 
 
     writeMessage(canvas, message); 
 
    } 
 

 
    function mouseUp() { 
 
     flag = 0; 
 
     canvas.removeEventListener("mousemove", myFunction); 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

这里是HTML和CSS代码，请看看，并帮助我做一些变化，如果你发现任何这将有助于。谢谢。

来源

2016-11-28 кузьмич

[this]（http://stackoverflow.com/questions/11144370/using-mousedown-event-on-mobi le-without-jquery-mobile）是你应该用于移动的。 –

因为触摸事件不是鼠标事件。如果你添加一个鼠标，你可以获得鼠标事件。

对于触摸事件，你需要使用

pointerup 
pointerdown

活动/事件侦听。详细了解pointerup和pointerdown。

用法：为指针添加addEventListener。

document.getElementById('elem1').addEventListener('pointerdown', methodForPointerDown, false); 
document.getElementById('elem1').addEventListener('pointerup', methodForPointerUp, false);

来源

2016-11-28 07:26:59

谢谢。但是我怎样才能使用鼠标和鼠标呢？ –

有一个替代MouseUp和mouseDown移动浏览器他们不使用鼠标的sice。

您可以使用touchstart和touchend，而不是他们在你的情况下，为移动浏览器。

There is a link here for reference

这里是另一组用于移动设备的事件侦听器。

Pointer Events

这里是你如何检测指针设备类型与指针事件监听器

从用户

window.addEventListener("pointerdown", detectInputType, false); 

function detectInputType(event) { 
    switch(event.pointerType) { 
     case "mouse": 
      /* mouse input detected */ 
      break; 
     case "pen": 
      /* pen/stylus input detected */ 
      break; 
     case "touch": 
      /* touch input detected */ 
      break; 
     default: 
      /* pointerType is empty (could not be detected) 
      or UA-specific custom type */ 
    } 
}

希望这可以帮助你检测输入的类型的例子。。

来源

2016-11-28 07:31:10

谢谢。但是我怎样才能使用触摸和鼠标两者？ –

因为（MouseUp mouseDown）不在使用mbbile浏览器吗？

回答

相关问题