在我的HTML5页面中,我有一个div mousemove事件如下:
$('#canvas').mousemove(function(e){
xpos = e.offsetX;
ypos = e.offsetY;
$('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});
它适用于谷歌浏览器.但在Firefox中,两者都给出了价值undefined.我已经使用Firebug进行了检查,即将e对象记录到控制台.这两个offsetX和offsetY被发现undefined.
当我在谷歌搜索,有一个解决方案,说我应该使用layerX和layerY,如果这两个offsetX和offsetY是不确定的.但是从Firebug,我无法找到它.甚至我试过这样的尝试:
xpos = (e.offsetX==undefined)?e.layerX:e.offsetX;
ypos = (e.offsetY==undefined)?e.layerY:e.offsetY;
但这也是undefined值得的.
我正在使用最新的jQuery - v1.8.2.我正在使用我的Firefox v14.0.1进行测试
任何想法或建议？
编辑
感谢dystroy和vusan帮助我.上述问题的解决方案如下:
解
$('#canvas').mousemove(function(e){
$('#cursor').show();
if(e.offsetX==undefined) // this works for Firefox
{
xpos = e.pageX-$('#canvas').offset().left;
ypos = e.pageY-$('#canvas').offset().top;
}
else // works …iPhone/iPad等移动设备的可视视口和布局视口之间的区别是什么？
我已经浏览了很多在线资源,但我仍然不清楚它.
作为登录功能的硒测试的一部分,我想通过识别其坐标点击按钮,并指示硒点击这些坐标.这将在没有实际识别元素本身的情况下完成(通过id,xpath等).
我知道还有其他更有效的方法来运行click命令,但我希望专门使用这种方法来最好地匹配用户体验.谢谢.
我需要一个火箭来跟踪我网站上鼠标指针的移动.这意味着它应该旋转以面向运动方向,并且如果可能,根据它必须覆盖的距离加速.这甚至可能吗？jquery也许？
正如Mozilla在TouchEvent页面上所述:
事件的目标是接收与触摸点相对应的触摸启动事件的相同元素,即使触摸点已移出该元素之外.
这与mousemove和mouseup不同,其中目标实际上是鼠标所在的DOM元素.
在不使用任何库的情况下,获取我touchmove或touchend事件发生的元素的最佳方法是什么？
我正在尝试使用画布,以便用鼠标可以写出他们的签名.一切正常,直到我拉伸或滚动屏幕然后它在远离鼠标的不同位置绘制线条.
代码:
function onMouseUp(event) {
'use strict';
mousePressed = false;
}
function onMouseMove(event) {
'use strict';
if (mousePressed) {
event.preventDefault();
mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
}
function onMouseDown(event) {
'use strict';
mousePressed = true;
mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;
ctx.beginPath();
ctx.moveTo(mouseX, mouseY);
}
can.addEventListener('mousemove', onMouseMove, false);
can.addEventListener('mousedown', onMouseDown, false);
can.addEventListener('mouseup', onMouseUp, false);
HTML看起来像:
<canvas id="signature" width="567" height="150"></canvas>
我一直在寻找关于这些事件如何运作的明确指南,现在我比起初时更困惑.
我网站的某些功能涉及拖放.当前移动设备(或任何没有鼠标的东西)通过让用户选择项目,点击"移动"按钮,然后触摸放置点来支持.虽然这很有效(项目在可见网格上),但它不像拖动那样用户友好.
我最初的理解是,只要我给你element.onmousedown,element.onmousemove而且element.onmouseup我可以简单地也将相同的处理程序element.ontouchstart,element.ontouchmove并element.ontouchend分别.
但是,这留下了以下问题:
我创建了一个在鼠标移动时跟随您的鼠标x和y坐标的形状。您可以在此处检查结果：http : //codepen.io/anon/pen/qNKgqo
这样可以正常工作，并且形状位于鼠标光标的中心。不幸的是我有一些问题。
如您在演示中所见，我有一个部分位于屏幕顶部。在HTML标记的最顶部，您会注意到一个注释掉部分。如果删除注释标记，则会设置一个新部分。当您将鼠标悬停在项目上时，结果与之前相同，但是当您滚动到下一部分时-带有三个拇指的那个部分，您会注意到形状未居中于鼠标，而是偏移的方式。只有当您将鼠标悬停在底部上时，您才会看到一小块形状。
为了使圆心位于鼠标光标的中心，我使用以下脚本：
var target = $(this);
var dot = target.find('.pointer');
var height = dot.height();
var width = dot.width();
var offset = target.offset();
var top = offset.top;
var left = offset.left;
var mX = (event.clientX - left) - width / 2;
var mY = (event.clientY - top) - height / 2;
上面的代码来自mouseMove函数，将在鼠标移动时触发。
我的问题是我做错了什么或代码中缺少什么。当只有一个部分时，它应该可以正常工作，但是在将另一部分添加到HTML标记后，它将被弄乱。