jQuery - 访问X和Y坐标（自定义事件） [英] jQuery - Access X and Y coordinates (custom event)

问题描述

我正在制作图片幻灯片并使其触摸启用。我正在使用本文中提到的代码片段： 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）; 
 
函数onDownEvent（e）{
 
 //这是我需要X和Y坐标访问
 
 //这将返回result：undefined 
 var x = e.pageX; 
 console.log（x）; 
} 
  

所以我的问题是：如何访问X和Y坐标？ / p>

*注意：我很新的JS / jQuery

解决方案

我知道这个问题已经够老了，但是当使用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; 
}）; 
  

第一个功能将返回您在开始时在浏览器中触摸的位置的x / y 。第二个将给你在浏览器中触摸的位置的x / y，但每次移动你的手指都会被调用。

而不是定位clientX/clientY 您还可以定位：

• screenX / screenY - 这相信您触摸设备屏幕的位置，因为客户端在浏览器中窗口。


• pageX / pageY - 这相当于文档或网页的左上角的值，而不是浏览器屏幕或设备屏幕。

I'm working on an image slide and making it touch enabled. I'm doing this by using a code snippet mentioned in this article: http://blog.safaribooksonline.com/2012/04/18/mapping-mouse-events-and-touch-events-onto-a-single-event/

The author mentions that by using his code, which triggers a normalizing event on touch events, the access of X and Y coordinates is much easier. And that's exactly what I found difficult. I can't seem to access these values at all. I've tried everything I can come up with.

Here's the code: http://jsfiddle.net/BC8dr/3/

normalizeEvent:

function normalizeEvent(type, original, x, y){

    return jQuery.Event(type, {

        pageX: x,
        pageY: y,
        originalEvent: original

    });

}

At the bottom of the code I have commented where I wan't the access:

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);
}​

So my question is: how do I access X and Y coordinates?

*NOTE: I'm pretty new to JS/jQuery

解决方案

I know this question is old enough but when using e.pageY e.PageX I had problems on Android phones.

How fixed this was by targeting a different value of the event, like:

$(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;
    });

The first function will give you back the x/y of where you touch in the browser when you start. The second will give you the x/y of where your touch in the browser but is called every time you move your finger.

Instead of targeting "clientX"/"clientY" you can also target:

• screenX/screenY - which believe is where you touch on the device screen where as client is just within the browsers window.
• pageX/pageY - which believe takes the value from the top left corner of the document or webpage and not of the browser screen or device screen.

这篇关于jQuery - 访问X和Y坐标（自定义事件）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！