This is the 14th day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Today to write a small Demo, there is a place involved in the left slide right slide logic, originally thinking of using plug-ins, but think of their long time no use native JS write slide listening, so try to use native JS to achieve a, after all, you know the new, while making a record. First post the results:

conceived

To write a silky touch slide event listener, consider the following three aspects of logic:

  • Distance: The sliding distance should be greater than 40
  • Time: The sliding time is less than 0.5 seconds, that is, 500 milliseconds to complete the finger press, drag, leave (to avoid just the finger on the screen to trigger)
  • Sliding direction:
    1. The condition of left-right sliding is: the distance of X-axis movement is greater than the distance of Y-axis movement, which is regular to the left and negative to the right
    2. The condition of sliding up and down is that the distance of Y axis movement is greater than the distance of X axis movement, which is regular up, and negative down

Now that we have a basic idea, we can complete the code with this idea

Monitored events

When it comes to listening for touch slides, there are three touch events:

3. Touchend: trigger when the finger leaves the screenCopy the code

Each of these three touch events contains a list of three touch objects (which can be multi-touched by touch points) :

TargetTouches: a list of fingers on the current DOM element. ChangedTouches: a list of current event touchesCopy the code

And each Touch object Touch contains the following properties:

- identifier: identify the only ID - pageX: touch touch point x coordinate in the page - pageY: touch the y coordinates of points on the page - screenX: touch point on the screen of the x coordinate - screenY: y - clientX in touch point on the screen: The x-coordinate of the touch point in the viewport - clientY: the y-coordinate of the touch point in the viewport - Target: the DOM node of the touchCopy the code

Code implementation

With the above ideas and the basics of touch events, it’s easy to type out the code

let box = document.querySelector('body') // Listen to the object
let startTime = ' ' // Start time of touch
let startDistanceX = ' ' // Touch the starting X-axis position
let startDistanceY = ' ' // Touch the start Y position
let endTime = ' ' // Touch end time
let endDistanceX = ' ' // Touch to end the X-axis position
let endDistanceY = ' ' // Touch to end the Y-axis position
let moveTime = ' ' // Touch time
let moveDistanceX = ' ' // Touch to move X wheelbase away
let moveDistanceY = ' ' // Touch to move Y wheelbase away
box.addEventListener("touchstart".(e) = > {
    startTime = new Date().getTime()
    startDistanceX = e.touches[0].screenX
    startDistanceY = e.touches[0].screenY
})
box.addEventListener("touchend".(e) = > {
    endTime = new Date().getTime()
    endDistanceX = e.changedTouches[0].screenX
    endDistanceY = e.changedTouches[0].screenY
    moveTime = endTime - startTime
    moveDistanceX = startDistanceX - endDistanceX
    moveDistanceY = startDistanceY - endDistanceY
    console.log(moveDistanceX, moveDistanceY)
    // Determine if the slide distance exceeds 40 and the time is less than 500 milliseconds
    if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
        // Determine whether the X axis has moved farther than the Y axis
        if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
        / /
        console.log(moveDistanceX > 0 ? 'the left' : 'right')}else {
        / / up and down
        console.log(moveDistanceY > 0 ? 'on' : 'next')}}})Copy the code

Run it and see:

It can be seen that the touch time is greater than 500ms and the sliding distance is less than 40, neither will the trigger be triggered. If it is an angular sliding, the farthest moving distance of XY axis will prevail. Perfect realization!

Afterword.

The front-end framework is developing rapidly, and many people learn the framework directly without pressure, so they do not pay so much attention to the learning of native JS. The advantage of the framework lies in its design thought and mode. If you want to have a deep understanding of the original JS as the foundation, if you want to go far, or to consolidate the foundation, after all, great oaks grow from little acorns, isn’t it?

PS: Today is the 14th day for me to participate in the gold digging challenge, the Dragon Boat Festival is still working hard to look at the article, now has persisted for 14 days, half a month, grationable congratulations ~ where there is a will, there is a way. Come on, everybody

The list of articles with further challenges is as follows:

  • Flex layout container elements and project elements attributes
  • 2021.06.02 how to play with CSS Gradient Background
  • How to Use SVG to create Text Effects along Arbitrary Paths
  • 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
  • Git Commit Specification for team management: How many people don’t write commit records?
  • 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
  • 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
  • On Prototypes and Prototype Chains in 11 Aspects
  • A Closer Look at JavaScript scope and Scope Chains
  • What is a closure in JavaScript?
  • 2021.06.11 pure CSS Implementation: Cool Video Text Mask Effects
  • Apply a free API and use native JS to create typewriter-like vertical lines of text
  • Pure CSS implementation: Zebra stripes inside multi-line Text boxes