For some reason, I can't use jQuery.

This is my code :

document.addEventListener("touchstart", function(e) {
    e.preventDefault();

    var orig = e.originalEvent;

    var x = orig.changedTouches[0].pageX;
    var y = orig.changedTouches[0].pageY;

    //id("#draggable").css({top: y, left: x});
    id("draggable").style.left = x;
    id("draggable").style.top = y;

});

Using jQuery, you can get the originalEvent , but if you don't use it, how to get it?

Thanks

For some reason, I can't use jQuery.

This is my code :

document.addEventListener("touchstart", function(e) {
    e.preventDefault();

    var orig = e.originalEvent;

    var x = orig.changedTouches[0].pageX;
    var y = orig.changedTouches[0].pageY;

    //id("#draggable").css({top: y, left: x});
    id("draggable").style.left = x;
    id("draggable").style.top = y;

});

Using jQuery, you can get the originalEvent , but if you don't use it, how to get it?

Thanks

• javascript
• jquery
• iphone
• events

4 Answers 4

jQuery's event object that it passes to event listener function is jQuery's own creation. Its originalEvent property is the actual Event object created by the browser, so if you attach an event listener without jQuery, the event object that is passed to your listener is exactly the same as the originalEvent property of a jQuery event object. Therefore in your example, e is precisely what e.originalEvent would point to if you'd used jQuery.

I've e with a simple solution for your question. I added a global variable "hovered" and mouseover, mouseout events to the button. When the mouse hovers the button then variable "hovered" is set to true and if the mouse hovers off the button it is set to false. This mechanism allows you to determine whether the mouse is on the button while the onchange event fires. So if the mouse is hovering on the button while the onchange event is triggered then we know that the user clicked the button and that triggered onchange.

Of course this is a quick and dirty solution just to give you an idea. It can be done better. Hope it helps:)

var hovered = false;

$('#button').mouseover(function(){
    hovered = true;   
}).mouseleave(function(){
    hovered = false;
});

$(function(){
    $('#button').bind("click",function(){
          alert("button click");
      });
$('#textbox').bind("change",function(){

    alert("text changed");
    if (hovered)
        $('#button').trigger('click');                
});

});​

var x = e.pageX;

If you have Safari on your desktop, open it in iPhone mode
Develop-> User Agent-> Mobile Safari...
And put a breakpoint inside your function, the you can inspect the e object and all its properties.

I think you're using changedTouches, which is a list of Touches for every point of contact which contributed to the event. Multi-touch is an example of when this would happen. For touchstart you might want to just check touches, a list of Touches for every point of contact currently touching the surface.

var origTarget = e.originalEvent.touches[0].target
var x = e.originalEvent.touches[0].pageX
var y = e.originalEvent.touches[0].pageY