Mobile-Custom Events

The event type and PC side of the mobile side are different, there are touchstart,touchmove,touchend ...

Today, Touchstart and touchend are used to encapsulate a trigger event that slides left and right (where the package is used in subscriber release mode)

Step: First, create event (Document.createevent ("Customevent"))

Second, initialize event (event.initcustomevent ("event name", True,true,{key:value}))

Second. The third parameter indicates whether it is bubbling, canceled, and the fourth parameter is the extra data that is carried when the time is triggered, and it is saved in the detail property of the event object

Iii. Distribution of Events <---(publishers)

Distributing to the required DOM objects

Iv. DOM Object Event bindings <---(subscribers)

Ideas:

In Touchstart, which is the start of the touch, get coordinates, save these coordinate values in an object literal, touchend stage to get the coordinate value to save to the object

And then start comparing.

<div style= "width:100%;height:600px;" id= "box" > I was content </div><script>var box = document.getElementById ("box"), function swipe (obj) {var Initcoord = {//Initialize coordinate sx:0,/* Module */sy:0,/* subscriber */ex:0,/* Type */ey: 0}//Listen for events, get start position coordinates obj.addeventlistener ("Touchstart", function (e) {//Console.info (E.targettouches[0].pagex); INITCOORD.SX = E.targettouches[0].pagex;initcoord.sy = E.targettouches[0].pagey;}) End location coordinates obj.addeventlistener ("Touchend", function (e) {initcoord.ex = E.changedtouches[0].pagex;initcoord.ey = e.changedtouches[0].pagey;//judge left or right if (Initcoord.sx-initcoord.ex > 30) {//left//Create custom events var event = Document.createevent ("customevent");//Initialize Event.initcustomevent ("Swipeleft", True,true,{data: "Value"}); This.dispatchevent (event);//The Events distribution//Publish message distributes time to the event object//Console.info ("Slide Left")}if (Initcoord.ex-initcoord.sx >30) { var event = document.createevent ("customevent");//Initialize Event.initcustomevent ("Swiperight", True,true,{data: "Value"}) ; This.dispatchevent (event);////Console.info ("right-sliding")}if (Initcoord.Sy-initcoord.ey > {var event = document.createevent ("customevent"); Event.initcustomevent ("Swipeup", True,true, {data: "value"}); This.dispatchevent (event);//Console.info ("Up-slide")}if (Initcoord.ey-initcoord.sy >30) {var event = Document.createevent ("Customevent"); Event.initcustomevent ("Swipedown", True,true,{data: "Value"}); This.dispatchevent (event);//Console.info ("downward")}); Swipe (box); Box.addeventlistener ("Swiperight", function (e) {console.info ("slide Right", e.detail.data,e)})
</script>

Mobile-Custom Events