Max Williams Max Williams - 1 month ago 14
Javascript Question

Display all iphone screen interaction events to the user

My iPhone's screen is playing up. I had the idea, since I'm a web developer, to go to a page on my local machine's web server, or on jsfiddle, using my phone, and have some jquery running on that page which gives me some simple feedback about every touch event. (I have a feeling that I will see lots of spurious swipe events firing off even when i'm not touching the screen, for example).

So, something like this:

<div id="feedback">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">

function feedback(msg){
$("#feedback").append("<div class=\"line\">"+msg+"</div");
}

$(function() {
feedback("in $(function) block");
$(document).on("click", function(event){
feedback("clicked at "+event.pageX+","+event.pageY);
});
//can you replace the below with working code?
$(document).on("all events", function(event){
var msg = "Some basic info about this event: if it's a swipe, which direction. if it's a keypress, which character? etc"
feedback(msg);
});
});

</script>


I've set this up in a jsfiddle here: https://jsfiddle.net/sxqjp9xe/

Do I need to write a handler for every event i'm interested in, like I've done with the click handler? Or is there some more generic solution? Thanks, Max

EDIT: changed my "feedback" function to use
prepend()
instead of
append()
as it's easier to see once you get a lot of lines on there.

Answer

You can include more than one event in the handler:

function feedback(msg){
$("#feedback").append("<div class=\"line\">"+msg+"</div");  
}

$(document).on("blur touchstart touchmove touchend touchcancel  focus focusin focusout load resize scroll unload click dblclick mousedown mouseup  mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error", function(event) {
var msg = event.type
  feedback(msg);
}

https://jsfiddle.net/e9e0ehyc/