JQuery Mobile Touch Event Instance _jquery

The touch event is triggered when the user touches the screen (page).

The jquery library and the jquery Mobile library must be introduced as follows:

<script src= "Http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src= "Http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>

1.jQuery Mobile clicks

The Click event is triggered when the user clicks on the element.

The following example: When the <p> element is clicked, the current <p> element is hidden:

Copy Code code as follows:

<script>
$ (document). On ("Pagecreate", "#pageone", function () {
$ ("P"). On ("Tap", function () {
$ (this). Hide ();
});
});
</script>
<div data-role= "main" class= "Ui-content" >
<p> knock me down, I'll disappear. </p>
<p> knock me down, I'll disappear. </p>
<p> hit me and I'll disappear. </p>
</div>

2.jQuery Mobile clicks (Long Press)

Click on (Long Press) event to trigger after clicking (about one second)

Copy Code code as follows:

<script>
$ (document). On ("Pagecreate", "#pageone", function () {
$ ("P"). On ("Taphold", function () {
$ (this). Hide ();
});
});
</script>
<div data-role= "main" class= "Ui-content" >
<p> If you hit and hold it for a second, I'll disappear. </p>
<p> knock and hold on, I'll disappear. </p>
<p> knock and hold on and I'll disappear. </p>
</div>

3.jQuery Mobile Sliding

A slide event is an event that is triggered when a user is horizontally dragging more than 30PX in one second, or when an event that is less than 20px is dragged vertically:

Copy Code code as follows:

<script>
$ (document). On ("Pagecreate", "#pageone", function () {
$ ("P"). On ("Swipe", function () {
$ ("span"). Text ("Sliding detection!");
});
});
</script>
<div data-role= "main" class= "Ui-content" >
<p> slide in the text or box below. </p>
<p style= "border:1px solid black;height:200px;width:200px;" ></p>
<p><span style= "color:red" ></span></p>
</div>

4.jQuery Mobile slide to the left

Sliding left event triggers when the user drags an element greater than 30px to the left:

Copy Code code as follows:

<script>
$ (document). On ("Pagecreate", "#pageone", function () {
$ ("P"). On ("Swipeleft", function () {
Alert ("You slide to the left!");
});
});
</script>
<div data-role= "main" class= "Ui-content" >
<p style= "border:1px solid black;margin:5px;" > Slide to the left-don't go beyond the border! </p>
</div>

5.jQuery Mobile Slide Right

Slide the event to the right when the user drags an element greater than 30px to the right:

Copy Code code as follows:

<script>
$ (document). On ("Pagecreate", "#pageone", function () {
$ ("P"). On ("Swiperight", function () {
Alert ("Slide right!");
});
});
</script>
<div data-role= "main" class= "Ui-content" >
<p style= "border:1px solid black;margin:5px;" > Slide Right-don't go beyond the border! </p>
</div>

The above is the entire content of this article, I hope to give you a reference, but also hope that we support the cloud habitat community.