个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我的代码采用鼠标位置。手机浏览器支持html5。但不能使用 MouseUp mouseDown我该如何修复它？
<!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 代码，请查看并帮助我进行一些更改，如果您发现任何有帮助的话。
最佳答案
因为触摸事件不是鼠标事件。如果添加鼠标，就可以获得鼠标事件。
对于触摸事件，需要使用
pointerup
pointerdown
事件/事件监听器。了解更多关于 pointerup和 pointerdown .
用法:为指针添加addEventListener。
document.getElementById('elem1').addEventListener('pointerdown', methodForPointerDown, false);
document.getElementById('elem1').addEventListener('pointerup', methodForPointerUp, false);
关于javascript - 为什么 (MouseUp mouseDown) 在移动浏览器上不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40838963/
26
4
0
当我点击菜单时，菜单会显示，但是当指针从菜单上移开时，它会在 2-5 秒后隐藏。 我希望菜单在单击时切换，并在单击页面上的其他任何位置时显式隐藏，如 this demo. 所示。 this fiddl
我找到了一些代码，并做了一个 jsfillde用它。我需要知道当您离开文档正文时如何在下面的函数中触发 mouseup(在 fiddle 示例中，就像将对象拖到 HTML 部分中并将鼠标单击留在那里)
我创建了一个函数，可以根据菜单的可见性来切换菜单。我还为文档分配了一个 mouseup 事件，如果用户单击菜单之外的任何位置，菜单就会关闭。问题是当为 document 添加 mouseup 事件监听
我正在尝试使用 jQuery 创建按住确认按钮。问题是当我在此函数中插入代码时，mouseup 事件没有触发。它仅在函数为空且只有 console.log 时触发。这是示例: self.on('mou
我有一个包含跨度的 div。我有一个 mouseup 和 mousedown 事件，在按下 div 时应该触发。但是它无法正常工作。 请转到这个 fiddle :http://jsfiddle.net
您好，我正在研究两个函数 swapFE() 和 swapEF()。这两个功能的目的是将法语短语与我已经完成的英语短语交换。 当我在每个短语上按下鼠标按钮时，会出现英文翻译，这正是我想要的。 问题是当我
我有一个功能可以让我四处拖动东西。我的 js: $(function() { $( svgcanv ).css('cursor', '-moz-grab'); va
大家好，我的代码运行良好，但我希望脚本在鼠标松开事件时停止。 这是我现在拥有的一个例子。我怎样才能在鼠标松开事件上停止脚本，以便它看起来只在拖动图像时显示坐标。 谢谢! http://jsfiddle
我正在使用 Windows Presentation Foundation (WPF) 制作 GUI。当我用鼠标单击一个按钮(向左或向右)时，我想要显示一个消息框。到目前为止，我已经设法从教程中制作了
我正在使用 Konva 库绘制 Canvas 并将图像拖到 Canvas 上 我的问题是如何使用 Konva 选择 Canvas 的一部分并为所选部分填充颜色 1) 用户通过拖动鼠标选择一个部分2)
当您在图像上 mousedown 时，稍微移动鼠标 (mousemove)，然后松开 (mouseup)， mouseup 不是用 jQuery 触发的。 jsfiddle:http://jsfidd
我正在尝试制作一个非常简单的应用程序，当鼠标按钮按下时，用户可以使用选定的颜色绘制到表格中，当鼠标松开时事件停止。 绘图效果很好，唯一的问题是释放鼠标时事件不会停止。我已经尝试过很多方法，但显然我做错
我找不到任何答案，所以我在这里提问。目前我没有任何触摸设备，因此无法测试它。 如果在容器外部单击，以下代码将隐藏容器中的所有子容器。 $(document).mouseup(function(e) {
我已经搜索了很多，但似乎无法找到令人满意的解决方案。希望有人能帮忙。 当我使用 jQuery 时，我还编写了数千行 JavaScript。所以“纯”JavaScript 解决方案就可以了。 我正在尝试
我已经阅读了 stackoverflow 上与这种情况相关的几个答案，但没有一个解决方案有效。 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作。 有可能实现这个目
我正在尝试完成一个基本的阻力。在 mousedown 上，项目开始拖动，但速度与鼠标不同，因此当鼠标位于窗口外部时我继续拖动，但如果鼠标不在页面上，我无法获取 mouseup 事件。 我可以看到其他页
编写一些拖放代码，我想取消 mouseup 处理程序中的单击事件。我认为防止默认应该可以解决问题，但点击事件仍然被触发。 有办法做到这一点吗？ 这不起作用: test $("#test").mous
如何将 -mouseUp: 事件与 NSArrayController 的 -add: 方法关联起来？ -mouseUp: 事件位于不同的对象中，但在保存受控数组的对象中进行 #import 编辑和实
我正在尝试使用 Javascript(无库)拖动图像。我能听mousedown和 mousemove事件。由于某种原因，我无法捕获 mouseup mousemove 之后的事件. (如果是单击，我可
我正在尝试使用一对单选按钮来启动/停止自动水平滚动条。我已经尝试了几种在 SO 上找到的 jquery 技术，但我无法让它们发挥作用。 这是我最新的尝试: $( "#radAutoScroll0" )
我是一名优秀的程序员,十分优秀！