手机触摸事件

Question

I want to create a slider. Here is my javascript code:

<div id="ghgh" style='width:50px;height:50px;position:absolute;top:0;left:0;background:#000'>
</div>
<script type="text/javascript">
$(document).bind('mousemove',function(ev){
$('#ghgh').offset({left:(ev.pageX-25)});});
</script>

This, however, only works in computers but not touch screen. I have tried to use events like touchmove,slide,scroll,etc. yet none of them works. What events should I use in order to make it work in touch screens?

Answer 1

First of all: put your styles and scripts in separate files.

For touch events, you may have a look at hammer.js

Example from their website:

Hammer(el).on("swipeleft", function() {
    alert('you swiped left!');
});

EDIT: more specific example:

Hammer(document.body).on('drag', function (event) {
    var gesture = event.gesture,
        pageX = gesture.center.pageX,
        pageY = gesture.center.pageY,
        deltaX = gesture.deltaX,
        deltaY = gesture.deltaY;
    // console.log(event); Uncomment this to see all properties of the event object in your webinspector console
});