jQuery – 访问X和Y坐标(自定义事件)
我正在处理图像幻灯片并启用触摸function。 我是通过使用本文中提到的代码片段来完成此操作的: http : //blog.safaribooksonline.com/2012/04/18/mapping-mouse-events-and-touch-events-onto-a-single-event /
作者提到,通过使用触发事件触发规范化事件的代码,X和Y坐标的访问变得更加容易。 这正是我发现的困难。 我似乎无法访问这些值。 我已经尝试了所有可以想到的东西。
这是代码: http : //jsfiddle.net/BC8dr/3/
normalizeEvent:
function normalizeEvent(type, original, x, y){ return jQuery.Event(type, { pageX: x, pageY: y, originalEvent: original }); }
在代码的底部,我评论了我不能访问的地方:
jQuery(current_slide).bind(TouchMouseEvent.DOWN, onDownEvent); function onDownEvent(e){ // This is where I need X and Y coordinate access // This will return result: undefined var x = e.pageX; console.log(x); }
所以我的问题是:如何访问X和Y坐标?
*注意:我是JS / jQuery的新手
您可以使用event.clientX
event.clientY
接收X和Y坐标,以便在您的情况下
function onDownEvent(e){ console.log('X = ' + e.clientX); console.log('Y = ' + e.clientY); }
你可以在这里阅读更多
我知道这个问题已经足够老了但是当使用e.pageY e.PageX时我在Android手机上遇到了问题。
如何通过定位事件的不同值来解决此问题,例如:
$(window).on("touchstart", function(event){ var touchStartY = event.originalEvent.touches[0].clientY; var touchStartX = event.originalEvent.touches[0].clientX; }); $(window).on("touchmove", function(event){ var touchMoveY = event.originalEvent.touches[0].clientY; var touchMoveX = event.originalEvent.touches[0].clientX; });
第一个function将在您启动时返回您在浏览器中触摸的位置的x / y。 第二个将显示您在浏览器中触摸的位置的x / y,但每次移动手指时都会调用它。
您可以定位以下内容,而不是定位“clientX”/“clientY”:
- screenX / screenY – 相信是您在设备屏幕上触摸的位置,而客户端就在浏览器窗口中。
- pageX / pageY – 相信从文档或网页的左上角而不是浏览器屏幕或设备屏幕获取值。