Implement right-click menu and drag-and-drop function based on JavaScript

The following will first introduce to you the right-click menu function implemented in js. The specific details are as follows:

Problems solved in this chapter

1. Implement the right-click menu function code.

2. Prevent the practical application of default events.

Okay, the above code details are the right-click menu function implemented in js. Next, I will introduce to you the code analysis of js drag function

The problems solved in this chapter

1. How to implement the drag function in the web page.

2. The difference between document.documentElement and document.body.

document.documentElement.clientWidth refers to the width of the entire html document, the width of document.body.clientWidth. The two are not the same. You can test it through console.log(document.documentElement) and console.log(document.body) in the console.

3. The difference between getBoundingClientRect().left and offsetLeft.

getBoundingClientRect() is used to get the left, top, right, and bottom of the element. offset gets the left and top relative to the parent. getBoundingClientRect() gets the left, top, right and bottom relative to the window.

4. e.clientX refers to the coordinates of the mouse point relative to the window.

点击